Archived topic
Archive Page Image Alignment Issues
7 replies · Started by Dan on August 16, 2021
Hello, I am trying to make all our archive pages 4 columns wide. When I do the images are not lined up on a horizontal plane unless you remove words in the titles. I would like to align the image tops so they are even all the way across. Also, how am I able to force it to 2 columns when on mobile? It seems to default to a single column for some reason.
The page I am working on: https://adventuresofmel.com/category/breakfast-brunch-recipes/
Thanks for the stellar support.
Dan
Hi Dan,
For the alignment, can you try disabling masonry grid at customizer > layout > blog?
For the columns layout, can you try switch to Flexbox instead of Float first at customizer > General? Then we can figure out a CSS solution :)
Let me know.
Hey Ying! I did what you asked and things look much better now. the floating was causing most of the issues I was seeing with alignment.
Now onto the 2 columns, what do you suggest?
Thanks
Dan
Give this CSS a try:
@media (max-width: 768px) {
.generate-columns-container > .mobile-grid-100 {
width: 50%;
}
}Let me know :)
Thanks Ying, that worked great! Now I am off to adjust the whitespace between each item on the page.
You have this CSS added:
https://www.screencast.com/t/arcq5spq
You can try to reduce the value or simply remove it.
If you want to set a specific value for mobile, try adding a media query like this for mobile:
@media (max-width: 768px) {
.entry-meta {
padding-top: 30px;
}
}Let me know if you need further assistance :)
Thank You again for that, I couldn't find what was adding the padding.
You are welcome :)
