Responsive Grid layout (Bootstrap?)
-
Hi folks,
I hope anyone can help me out here. I’m trying to show a 3 or 4 column grid for pod items, which should be responsive. The default bootstrap grid gives me 1 column. using just CSS with child-nth functionality as below gives me a more proper outcome:
.blog-entry {float:left; width:33.33333%; margin-bottom:1em;} .blog-entry:nth-of-type(3n+1) {padding-right:1%;} .blog-entry:nth-of-type(3n+2) {padding:0 .5%;} .blog-entry:nth-of-type(3n+3) {padding-left:1%;} .blog-entry img {width:100%; height:auto; margin:0;} .blog-entry:nth-of-type(3n+4) {clear:left;}
It’s working, but it isn’t responsive. I’d like to prevent using seperate media queries and using Bootstrap instead. Is this possible?
This is the template html code:”
<div class="blog-entry merken"> <a href="{@website}"><img class="logo" height="80" src="{@logo}" /></a> <img class="printerimg" height="80" src="{@printer_afbeelding}" /> <h2>{@post_title}</h2> <strong>Locatie:</strong> {@locatie}<br /> <!-- <strong>Contact:</strong> {@contact}<br /> --> <strong>Website:</strong> <a href="{@website}">{@website}</a><br /> <strong>E-mail:</strong> <a href="mailto:{@e-mail}">{@e-mail}</a> </div>
I hope anyone has a clear answer, or maybe solution for me ?? thank you very much in advance!
- This topic was modified 6 years, 7 months ago by .
- This topic was modified 6 years, 7 months ago by .
The page I need help with: [log in to see the link]
Viewing 5 replies - 1 through 5 (of 5 total)
Viewing 5 replies - 1 through 5 (of 5 total)
- The topic ‘Responsive Grid layout (Bootstrap?)’ is closed to new replies.