ike Posted September 25, 2019 Share Posted September 25, 2019 Can someone help me understand why the padding isn't applied equally to the top and bottom of my banners div? The top has the 50px padding but the bottom does not. However, when you resize the browser window then the padding seems to be applied equally. <style> /* -------------------- START BANNERS CSS STYLE-------------------- */ div.banners { padding: 50px 0px; margin: 0px 0px; background-color: #f60; } div.banners-third { width: 30%; margin-right: 5%; float: left; text-align: center; } div.banners-third-last { margin: 0px; } /* -------------------- END BANNERS CSS STYLE-------------------- */ /* -------------------- MEDIA QUERIES ---------------------- */ @media screen and (max-width: 820px) { div.banners-third { width: 47.5%; } div.banners-third-second { margin: 0px; } div.banners-third-last { padding: 20px 0px 0px; width: auto; clear: both; float: none; } } @media screen and (max-width:720px) { div.banners-third { width: 33%; margin-top: 25px; } div.banners-third-last { padding: 0px 0px 0px; width: auto; clear: both; float: none; } div.banners-mobile-collapse { width: auto; margin-right: 0px; float: none; } } </style> </HEAD> <body> <!-------------------- START BANNERS HTML --------------------> <!-- banners- --> <DIV class="banners"> <!-- one-third --> <DIV class="banners-third banners-mobile-collapse"> <h2>Banner 1</h2> </DIV><!--/banners-third--> <!-- banners-one-third --> <DIV class="banners-third banners-third-second banners-mobile-collapse"> <h2>Banner 2</h2> </DIV><!--/banners-third--> <!-- banners-one-third --> <DIV class="banners-third banners-third-last"> <h2>Banner 3</h2> </DIV><!--/banners-third--> </DIV><!--/banners--> <!-------------------- END BANNERS HTML --------------------> </BODY> </HTML> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now