CODEWITHSUNDEEP
htmlcssresponsive-design
Qozmiq
Qozmiq

Reputation: 23

Responsive divs covering other content on resize

I have three responsive divs inside a div. All is well until I resize, and the divs will sit on top of the content just below it.

What appears to be happening is the content below my responsive divs are not moving down to compensate at all when the page is resized. I've tried inline block, playing with float and clear, overflow, nothing seems to change it.

JSFiddle https://jsfiddle.net/Qozmiq/mgh0yL78/

This has to be something simple I'm missing.

CSS 

#pagewrapq {
padding: 5px;
width: 98%;
height: 300px;
margin: 20px auto;
}
headerq {
height: 100px;
padding: 0 15px;
}
#contentq {
width: 345px;
display: inline-block;
padding: 5px 15px;
}

#middleq {
width: 345px; /* Account for margins + border values */
display: inline-block;
padding: 5px 15px;
margin: 0px 5px 5px 5px;
}

#sidebarq {
width: 345px;
padding: 5px 15px;
display: inline-block;
}



/* for 980px or less */
@media screen and (max-width: 980px) {

#pagewrap {
    width: 94%;
}
#content {
    width: 41%;
    padding: 1% 4%;
}
#middle {
    width: 41%;
    padding: 1% 4%;
    margin: 0px 0px 5px 5px;
    float: right;
}

#sidebar {
    clear: both;
    padding: 1% 4%;
    width: auto;
    float: none;
}

header, footer {
    padding: 1% 4%;
}
}

/* for 700px or less */
@media screen and (max-width: 600px) {

#contentq {
    width: auto;
    float: none;
}

#middleq {
    width: auto;
    float: none;
    margin-left: 0px;
}

#sidebarq {
    width: auto;
    float: none;
}

}

/* for 480px or less */
@media screen and (max-width: 480px) {

headerq {
    height: auto;
}
h1q {
    font-size: 2em;
}
#sidebarq {
    display: none;
}

}


#contentq {
background: #f0efef;

}
#middleq {
background: #f0efef;

}
#sidebarq {
background: #f0efef;
}
headerq, #contentq, #middleq, #sidebarq {
margin-bottom: 5px;
}

HTML

<div id="pagewrapq">
<section id="contentq"><img class="displayed" title="Precision Engineering" alt="Precision Engineering" src="https://www.newvape.com/media/wysiwyg/calipers1.png" />
<h2 style="text-align: center;">Exceptional Engineering</h2>
<p>Function &amp; Style influence our engineering focus for our Domeless Nails, Enails, Dabbers, Grinders and Carb Caps. Having over 50 years of engineering and design experience allows us to create products that will last a lifetime. &nbsp;</p>
</section>
<section id="middleq"><img class="displayed" title="Made in the USA" alt="Made in the USA" src="https://www.newvape.com/media/wysiwyg/usa1.png" />
<h2 style="text-align: center;">US-Melted Metals</h2>
<p>We use only the finest US-melted metals. &nbsp;Whether it be our grade 2 titanium, 316 stainless steel, or 6061 Aluminum, only the finest materials go into our products. &nbsp;We start with the best, so we can create the best. &nbsp;</p>
</section>
<aside id="sidebarq"><img class="displayed" title="NewVape Quality" alt="NewVape Quality" src="https://www.newvape.com/media/wysiwyg/gear1.png" />
<h2 style="text-align: center;">Advanced Function</h2>
<p>Our vaporizer accessories are designed to optimize your experience to get the most out of your investment. &nbsp; Our Pax accessories let you extract more vapor, increase airflow, and adapt your vaporizer to work with a multiude of devices. &nbsp;</p>
</aside>
</div>
<div class="page-title category-title">
<h1>FEATURED PRODUCTS</h1>
<hr />
<h1>&nbsp;</h1>
</div>
<h3><span><strong><strong><a title="Pax 2 Replacement Screen" href="http://www.newvape.com/pax-accessory-screen-pax2-2732/"><img title="Pax 2 Replacement Screen" alt="Pax 2 Replacement Screen" src="https://www.newvape.com/media/wysiwyg/pax-2-screen-accessory-newvape.png" /></a>&nbsp; &nbsp;<a title="Domeless Combo Nail" href="http://www.newvape.com/domeless-nail-10-14-18mm-2424/"><img title="Domeless Nail - Combo 10mm 14mm 18mm" alt="Domeless Nail - Combo 10mm 14mm 18mm" src="https://www.newvape.com/media/wysiwyg/domeless-nail-newvape.png" /></a>&nbsp; &nbsp;<a title="Portable enail" href="http://www.newvape.com/enail-playmate-2723/"><img title="Domeless Nail - Combo 10mm 14mm 18mm" alt="Domeless Nail - Combo 10mm 14mm 18mm" src="https://www.newvape.com/media/wysiwyg/enail-newvape.png" /></a>&nbsp; &nbsp;<a title="3 inch Fine Grinder" href="http://www.newvape.com/fine-grinder-titanium-gray-2726/"><img title="Fine Grinder - NewVape" alt="Fine Grinder - NewVape" src="https://www.newvape.com/media/wysiwyg/3-inch-fine-grinder-newvape.png" /></a></strong></strong></span></h3>

Upvotes: 1

Views: 1371

Answers (5)

Harshit
Harshit

Reputation: 286

Don't give fixed height 300px , thats why the other contents are overflowing on each other , if you remove the height its done for you

so remove height from #pagewrapq, give it as:

#pagewrapq
{
height:auto;
}

Upvotes: 0

Soluciones Intuitivas
Soluciones Intuitivas

Reputation: 125

You can keep your #pagewrapq height, if needed.

Try to add a display: inline-table to your pagewrapq Id, it should fix it

#pagewrapq {
    padding: 5px;
    width: 98%;
    height: 300px;
    margin: 20px auto;
    display: inline-table;
}

Upvotes: 1

divix
divix

Reputation: 1364

Remove height: 300px; or change it to min-height: 300px; in #pagewrapq.

Upvotes: 0

danjah
danjah

Reputation: 1246

You have to remove height: 300px from #pagewrapq. Otherwise the content will quite naturally be floating into the content below on collapse, while taking up far more space than that.

Upvotes: 2

Lee
Lee

Reputation: 31

it looks like your #pagewrapq{height:300px;} is causing the issue. If you ispect element on your live test and deselect this css attribute then you'll see the page display as desired when resizing the window.

Do you need this? or maybe you can wrap an overwriting attribute with @media. So when the page gets re sized below a certain number then the height changes to height:100%

as in try placing this in your CSS file:

@media screen and (max-width: 1184px) {
    #pagewrapq {
        height:100%;
    }
}

Upvotes: 1

Related Questions