Open ErikThiart opened 4 years ago
Alright wrote a small fix, not the best, but it seems to get the job done.
/* article list */
.article-grid {
display: grid;
gap: 2.5rem;
grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
}
/* If the browser window is 1100px or smaller, make it full width */
@media only screen and (max-width: 1100px) {
.article-grid {
grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
}
}
Hi Erik, I think this problem can be solved from beauter's side also. If possible, can you share with me the generated HTML output from the browser directly? That way I can play directly with the viewport and container sizes to see what's going on at the rendering level (not the backend)
Thanks for letting me know of this :)
Hey, @ramdeoshubham I'll see if I can create a demo page and use the standard beauter code OR... if you have time on your hands, take this output and then use the col m4
-- that way you have the HTML to work with.
Side note: I think the SSL certificate for beauter expired
I am not sure if this will make a whole lot of sense, but when I use bootstrap I would generate blog posts as cards in PHP and then use a grid width like col-sm-4 to create 3 cards next to each other and if I have 9 blog posts it would be 3 rows of 3 cards.
However trying to do that with beauter, the CSS just does not behave so well.
Example code:
Result:
If there are just 3 blog posts it works, but when there is more the layout gets messed up - I know this is not the intended use, but most of what I do is dynamic content so I won't know the end count of items beforehand, I need the CSS to be smart and know that we mean to keep it 3 in a row and start a new stack when we have more than 3 posts.
I hope this makes sense?