Issues with the responsiveness of elements

Issue

As a newbie, I ran into trouble with the responsive elements of my code.

<html>
<head>
<style>
.nav-section {display: flex; justify-content: center; font-family: sans-serif; align-items: center; padding: 1rem;}

.header h1 {line-height: 1px;}

.header {flex: 60%;}

.nav-parent {flex: 40%;}

.header span {font-size: 12.8px; font-weight: 100; font-style: italic;}

ul li {list-style: none;}

ul li ~ li {margin-left: 8px;}

.btn {flex: 1; padding: 8px 0; text-align: center;}

.menu {display: flex; justify-content: center; color: #555; font-size: 12.8px; }

.active {background: #21759B; color: #ffffff;}
</style>
<body>
<div class="nav-section">
  <div class="header">
    <h1>Lorem Ipsum</h1>
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor magna ullamcorper, tristique lorem eu, facilisis elit.</span>
  </div>
    <div class="nav-parent">
    <ul class="menu">
      <li class="option active btn">Option</li>
      <li class="option1 btn">Option1</li>
      <li class="option2 btn">Option2</li>
      <li class="option3 btn">Option3</li>
      <li class="option4 btn">Option4</li>
      <li class="option5 btn">Option5</li>
    </ul>
  </div>
</div>
</head>
</body>
</html>

Under 590px, The "Lorem Ipsum" text merges into each other.

I want to resemble the responsive elements to look like this, when I collapse the screen size under 591px.
enter image description here

What should I do to achieve the results like the picture posted above?

Solution

Set line-height more than the original font-size. If you’re not sure set line-height: 1

<html>
<head>
<style>
.nav-section {display: flex; justify-content: center; font-family: sans-serif; align-items: center; padding: 1rem;}

.header h1 {line-height: 1;}

.header {flex: 60%;}

.nav-parent {flex: 40%;}

.header span {font-size: 12.8px; font-weight: 100; font-style: italic;}

ul li {list-style: none;}

ul li ~ li {margin-left: 8px;}

.btn {flex: 1; padding: 8px 0; text-align: center;}

.menu {display: flex; justify-content: center; color: #555; font-size: 12.8px; }

.active {background: #21759B; color: #ffffff;}
</style>
<body>
<div class="nav-section">
  <div class="header">
    <h1>Lorem Ipsum</h1>
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor magna ullamcorper, tristique lorem eu, facilisis elit.</span>
  </div>
    <div class="nav-parent">
    <ul class="menu">
      <li class="option active btn">Option</li>
      <li class="option1 btn">Option1</li>
      <li class="option2 btn">Option2</li>
      <li class="option3 btn">Option3</li>
      <li class="option4 btn">Option4</li>
      <li class="option5 btn">Option5</li>
    </ul>
  </div>
</div>
</head>
</body>
</html>

or consider changing its font size in responsive view.

A good place to start – https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answered By – Viira

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published