Search code examples
javascripthtmlcssmargin

how to move a section below another using margin property in css

i have an html page, which have a lot of sections in homepage, I have two sections like below:

<div class='first section'>
  <a href=''>
    <button style='background: linear-gradient(to bottom, #cc99ff 0%, #ff99cc 100%);'>

          <h3> HMT Rice</h3>
          </button>
  </a>
</div>

<div class='second section'>
  <a href=''>
    <button style='background: linear-gradient(to bottom, #cc99ff 0%, #ff99cc 100%);'>

          <h3> PKS Rice</h3>
          </button>
  </a>
</div>

I used margin-top property to bring first section a little bit lower, but its just creating a white space above and also.

i just want to make the first section below second section using css just like image below:

enter image description here is there anyway to bring the first section directly below using z-index or something. please help. thanks in advance

Solution

  • You can try with the following HTML and CSS.

    .section{
    position: relative;
}
.second_section{
    margin-top: 0px;
}
.first_section{
   position: absolute;
   margin-top: 70px; /* Adjust this margin top pixed according to the space you needed. */
}
    <div class="section">
    <div class="first_section">
      <a href=''>
        <button style='background: linear-gradient(to bottom, #cc99ff 0%, #ff99cc 100%);'>

          <h3> HMT Rice</h3>
          </button>
      </a>
    </div>

    <div class="second_section">
      <a href=''>
        <button style='background: linear-gradient(to bottom, #cc99ff 0%, #ff99cc 100%);'>

          <h3> PKS Rice</h3>
          </button>
      </a>
    </div>
</div>

    I have fixed the problem in your site by inspecting element. Please follow below code.

    You should wrap the buttons div and slider div with slide-button-wrapper div and add the css.

    <div class="slide-button-wrapper">            
    <div class="mainsme" id="grid">

      <h2 style="font-size:28px;">Shop by Category</h2>
      <div class="gridmine">
         <!---buttons will goes here-->
      </div>

    </div>
                     
    <div class="main-row slider-section" style="order: 1;">
        <banner codes are here>
    </div>
</div>


@media only screen and (max-width: 600px) {
        .slide-button-wrapper {
            display: flex;
            flex-direction: column;
        }
        
        .mainsme{
          order: 2;
        }
        .slider-section{
          order: 1
        }`
    }