0

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?

1 Answer 1

1

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

1
  • 1
    I was early trying to solve my issue with the mediaquery but was not successful. The line-height:1 has solved my issue. Thank you very much. I will definitely look into the link provided by you. Sep 29, 2021 at 18:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.