responsive grid height adjustment issue
Question
I am a bit of a novice with HTML and CSS. I have borrowed some code for a responsive grid online and adapted it to my needs.
My issue is that inside my columns there is text that is responding to the browser size and the columns with more text are breaking the column height and throwing the grid out of place.
What I'm looking for is that when one column's text is larger than the other in the same row, that the height for all columns in the row adjust accordingly, instead of just the column with the most text changing the height first and then breaking the grid.
The HTML and CSS are below. Thanks for your help.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Index</title> <link rel="stylesheet" href="css/main.css"> </head> <body> <div class="section group"> <div class="col span_1_of_8"> <img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" /> <h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3> <p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span></p> </div> <div class="col span_1_of_8"> <img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" /> <h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3> <p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span></p> </div> <div class="col span_1_of_8"> <img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" /> <h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3> <p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conWhat would twice or three times as many convWhat would twice or three times as many convversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span></p> </div> <div class="col span_1_of_8"> <img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" /> <h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3> <p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span></p> </div> <div class="col span_1_of_8"> <img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" /> <h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3> <p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span></p> </div> <div class="col span_1_of_8"> <img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" /> <h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3> <p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span></p> </div> <div class="col span_1_of_8"> <img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" /> <h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3> <p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span></p> </div> <div class="col span_1_of_8"> <img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" /> <h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3> <p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span></p> </div> </div> </body> <style> /* SECTIONS */ .section { clear: both; padding: 0px; margin: 0px; } /* COLUMN SETUP */ .col { display: block; float:left; margin: 1% 0 1% 1.6%; } .col:first-child { margin-left: 0; } /* GROUPING */ .group:before, .group:after { content:""; display:table; } .group:after { clear:both;} .group { zoom:1; /* For IE 6/7 */ } /* GRID OF EIGHT */ .span_8_of_8 { width: 100%; } .span_7_of_8 { width: 87.3%; } .span_6_of_8 { width: 74.6%; } .span_5_of_8 { width: 61.9%; } .span_4_of_8 { width: 49.2%; } .span_3_of_8 { width: 36.5%; } .span_2_of_8 { width: 23.8%; } .span_1_of_8 { width: 11.1%; } /* GO FULL WIDTH BELOW 480 PIXELS */ @media only screen and (max-width: 4000px) { .col { margin: 1% 0 1% 0%; } .span_1_of_8, .span_2_of_8, .span_3_of_8, .span_4_of_8, .span_5_of_8, .span_6_of_8, .span_7_of_8, .span_8_of_8 { width: 25%; } } /* GO FULL WIDTH BELOW 480 PIXELS */ @media only screen and (max-width: 1200px) { .col { margin: 1% 0 1% 0%; } .span_1_of_8, .span_2_of_8, .span_3_of_8, .span_4_of_8, .span_5_of_8, .span_6_of_8, .span_7_of_8, .span_8_of_8 { width: 33.33%; } } /* GO FULL WIDTH BELOW 480 PIXELS */ @media only screen and (max-width: 700px) { .col { margin: 1% 0 1% 0%; } .span_1_of_8, .span_2_of_8, .span_3_of_8, .span_4_of_8, .span_5_of_8, .span_6_of_8, .span_7_of_8, .span_8_of_8 { width: 50%; } } </style> </html>
1 answers
solution1
0 ACCPTED 2016-05-07 12:01:16
float s are the guilty property. Please, avoid floats in the year 2016 to layout. It's arcaic. If you change the float with inline-block it works perfectly.
/* SECTIONS */ .section { clear: both; padding: 0px; font-size: 0; margin: 0px; } /* COLUMN SETUP */ .col { display: inline-block; vertical-align: top; margin: 1% 0 1% 1.6%; font-size: 1rem; } .col:first-child { margin-left: 0; } /* GROUPING */ .group:before, .group:after { content:""; display:table; } .group:after { clear:both;} .group { zoom:1; /* For IE 6/7 */ } /* GRID OF EIGHT */ .span_8_of_8 { width: 100%; } .span_7_of_8 { width: 87.3%; } .span_6_of_8 { width: 74.6%; } .span_5_of_8 { width: 61.9%; } .span_4_of_8 { width: 49.2%; } .span_3_of_8 { width: 36.5%; } .span_2_of_8 { width: 23.8%; } .span_1_of_8 { width: 11.1%; } /* GO FULL WIDTH BELOW 480 PIXELS */ @media only screen and (max-width: 4000px) { .col { margin: 1% 0 1% 0%; } .span_1_of_8, .span_2_of_8, .span_3_of_8, .span_4_of_8, .span_5_of_8, .span_6_of_8, .span_7_of_8, .span_8_of_8 { width: 25%; } } /* GO FULL WIDTH BELOW 480 PIXELS */ @media only screen and (max-width: 1200px) { .col { margin: 1% 0 1% 0%; } .span_1_of_8, .span_2_of_8, .span_3_of_8, .span_4_of_8, .span_5_of_8, .span_6_of_8, .span_7_of_8, .span_8_of_8 { width: 33.33%; } } /* GO FULL WIDTH BELOW 480 PIXELS */ @media only screen and (max-width: 700px) { .col { margin: 1% 0 1% 0%; } .span_1_of_8, .span_2_of_8, .span_3_of_8, .span_4_of_8, .span_5_of_8, .span_6_of_8, .span_7_of_8, .span_8_of_8 { width: 50%; } }
<div class="section group"> <div class="col span_1_of_8"> <img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" /> <h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3> <p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span></p> </div> <div class="col span_1_of_8"> <img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" /> <h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3> <p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span></p> </div> <div class="col span_1_of_8"> <img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" /> <h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3> <p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conWhat would twice or three times as many convWhat would twice or three times as many convversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span></p> </div> <div class="col span_1_of_8"> <img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" /> <h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3> <p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span></p> </div> <div class="col span_1_of_8"> <img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" /> <h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3> <p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span></p> </div> <div class="col span_1_of_8"> <img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" /> <h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3> <p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span></p> </div> <div class="col span_1_of_8"> <img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" /> <h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3> <p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span></p> </div> <div class="col span_1_of_8"> <img class="image-4-3 home-services-images" src="http://www.webconverters.co.uk/wp-content/uploads/2015/02/servicesCRO-medium-1.jpg" alt="Search Engine Optimisation" /> <h3 class="Heading3" style="text-align: center;">Conversion Rate Optimisation</h3> <p style="text-align: center;"><span style="color: #000000; font-size: 14px;">What would twice or three times as many conversions mean to you business? We continuously optimise your pages through testing and keep increasing your conversion rates, sales and leads. </span></p> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Responsive grid (height issue)
proper height adjustment in css grid cell
Responsive Grid Height Issues
Multiple images height adjustment issue CSS
Responsive height of div issue
Bootstrap responsive height issue
Bootstrap responsive grid issue
Height adjustment issue of div according to the height of li tag in html
Issue in responsive grid item
Dynamic Height on Responsive Image Grid?
Related Tags