Section height is not stretch with content width?

HTML & CSS
1

CSS


.main-section{
  width: 100%;
  min-height: 619px;
  max-height: 750px;
  background-image: url(../images/main-bg.png);
  background-size: cover;
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat;
}

.main-section-container{
  position: relative;
  z-index: 2;
  width: 60%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  top: 80px;
}

@media (max-width: 700px){
  .btn-container{
    width: 236px;
    flex-direction: column;
  }

  .btn1, .btn2{
    margin: 10px 0px;
  }
}

My problem is when I try to make it responsive and when it hits 454px the main two buttons hide. because main-section is not stretching.

Here is some screenshots of my problem

Screenshot (177)
Screenshot (177)486×948 75.8 KB

How can I solve this problem? I wanna stretch main-section and keep buttons visible when decreasing size. (Main section is in light grey background.)

Thank you So Much for the help!

2

Hi kasunjalitha777, Welcome to the forums!

Could you also post relevant HTML?

It would help decide what to suggest if you do. :slight_smile:

Code formatting:
Select the pasted html and press the </> button.

1 Like
3

Then why have you put a max-height and overflow:hidden on it?

.main-section{
  width: 100%;
  min-height: 619px;
  max-height: 750px;
  background-image: url(../images/main-bg.png);
  background-size: cover;
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat;
}

That section can never be taller than 750px. You rarely want a height on a container like that anyway unless its just a placeholder for a background image.

Also avoid moving this with relative position as that will likely cause an overlap also.

.main-section-container{
  position: relative;
  z-index: 2;
  width: 60%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  top: 80px;/* bad idea */
}

However, none of those may be your problem until as @Erik_J said " we need to see the html that goes with it" :slight_smile:

1 Like
4 
<body>
  <header>
    <nav class="navigation">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Product</a></li>
        <li><a href="#">Faq</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <div class="menu-burger">
        <div class="hline"></div>
        <div class="hline"></div>
        <div class="hline"></div>
      </div>
    </nav>
  </header>


  <main class="main-section">
    <div class="main-section-container">
      <p id="line-1">Food app</p>
      <p id="line-main">Why stay hungry when you can order form Bella Onojie</p>
      <p id="line-3">Download the bella onoje’s food app now on</p>
      <div class="btn-container">
        <button class="btn1">Playstore</button>
        <button class="btn2">App store</button>
      </div>
    </div>
  </main>



  <section class="section-a">
    
  </section>

</body>

This is the html code. Thank you @Erik_J Thank you @PaulOB

6

Remove the max-height from .main-section and re-test. :slight_smile:

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.