html – How do you make 2 columns within a section stack on top of each other when browser is minimized?-ThrowExceptions

Exception or error:

I want two columns in a section to stack on top of each other when the browser is minimized and next to each other otherwise. I have never made a responsive page so I am pretty much new to this and I am not sure what I am doing wrong. Any help is appreciated! Here is my HTML code for the section:

       <section class="sec-top">
        <div class="clearfix" style=" background: linear-gradient(326deg, rgba(249,248,250,1) 0%, rgba(238,238,255,1) 0%, rgba(246,250,250,1) 100%);">
            <div class="column">
                <h2 style="padding-top:40px; color:#3d7cc9; text-align:center;">Lorem ipsum dolor sit amet.</h2>
                <p style="text-align:left; margin-left:215px; margin-right:220px;">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac pharetra turpis. Sed vitae orci.
                </p>
                <ul class="checkmark" style="display:inline-block; padding:0 21%;">
                    <li>Lorem ipsum dolor sit amet</li>
                    <li>Duis eu lorem ut risus sollicitudin</li>
                    <li>uspendisse malesuada augue sit amet ipsum laoreet</li>
                </ul>   
                <a href="#form" class="button" style="width:25%; margin-left:220px;">Request Demo</a>
                <p style="text-align:left; margin-left:215px; margin-right:220px; margin-top:40px;">
                    Lorem ipsum dolor sit amet.
                </p>
            </div>

            <div class="column">
                <div class="row">
                    <h3 style="padding-top:40px; color:#3d7cc9; text-align:center;">Try These Apps Now</h3>
                </div>
                <div class="row">
                    <div class="col-lg-3" style="margin-left:215px;">
                        <div class="service_block">
                            <div class="service_icon delay-03s animated wow  zoomIn">
                                <img src="../../assets/app1.jpg" class="img-section" alt="app1" />
                            </div>
                        </div>
                        <div class="row">
                            <img src="../../assets/ios-2.png" />
                            <img src="../../assets/googleplay.png" />
                        </div>
                    </div>
                    <div class="col-lg-3" style="margin-left:35px;">
                        <div class="service_block">
                            <div class="service_icon delay-03s animated wow  zoomIn">
                                <img src="../../assets/app2.jpg" class="img-section" alt="app2" />
                            </div>
                        </div>
                        <div class="row">
                            <img src="../../assets/ios-2.png" />
                            <img src="../../assets/googleplay.png" />
                        </div>
                    </div>
                </div>
                <p style="text-align:center; margin-top:20px; margin-right: 5px; font-size:15px;">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Quisque ultricies purus ex, vitae porta quam pellentesque non.
                    Maecenas venenatis justo lacus, at faucibus justo auctor et.
                    Maecenas auctor lorem ligula. Mauris finibus quam ut odio fermentum fringilla.
                    Pellentesque dictum arcu justo, non hendrerit enim accumsan id.
                    Aenean venenatis lectus et ipsum condimentum blandit.
                    Aliquam eu gravida leo. Morbi dictum volutpat metus.
                    Vestibulum tempus volutpat faucibus.
                    Duis suscipit suscipit dolor eget dictum.
                    In hac habitasse platea dictumst.
                    Fusce scelerisque diam risus, nec eleifend ex pharetra molestie.
                </p>

            </div>


        </div>
    </section>

Here is my css code for @media:

@media screen and (max-width: 600px) {
    .column,
     {
        width: 100%;
        max-width:100%;
        margin-top: 0;
    } 
} 

Any help is appreciated!

How to solve:

cannot comment yet.

Ok, since I see you are already probably using bootstrap(.row, .col-lg-3) I’m going to provide a solution with this fact in mind as well.

In bootstrap you can chain column values. This means it will size the screen based on the closest / most right condition.

In your case you can actually just use one class col-sm-6 this means the columns will be half the size until the screen is more then 576px after that they are automatically at 100%

  <section class="sec-top">
    <div class="clearfix" style=" background: linear-gradient(326deg, rgba(249,248,250,1) 0%, rgba(238,238,255,1) 0%, rgba(246,250,250,1) 100%);"> 
      <div class="row">
        <div class="column col-sm-6">
         ...
        </div>
        <div class="column col-sm-6">
         ...
        </div>
      </div>
    </div>
  </section>

a non bootstrap way would be:

  1. with calc and inline-block
    inline block introduces a small 2px width on elements
.column{
  width: calc(50% - 2px);
  display: inline-block;
}
@media screen and (max-width: 600px) {
  .column
   {
      width: 100%;
  }
}
  1. with float
    objects are together and no margin is introduced
.column{
  width: 50%;
  float:left;
}
@media screen and (max-width: 600px) {
  .column
   {
      width: 100%;
  }
}

###

I have tested this and believe it more or less achieves what you are looking for:

.clearfix {
    display: flex;
  }

@media screen and (max-width: 600px) {

  .clearfix {
    display: block;
  }
}

However, this will not scale well as you are currently spacing the other elements with static pixel measurements. Writing in-line styles is also a bad idea generally as they cannot be overriden without the bug-inducing !important rule in external sytle sheets.

Since you have included CSS in your question I would suggest you move all your styles across to the external sheet and take a look at some online resources for responsive web design – flexboxes, grid layouts and context based measurements (percent, vh/vw, rem/em) will make things much easier.

Leave a Reply

Your email address will not be published. Required fields are marked *