-
Posts
-
I have my Blog Posts set up to display with the Masonry tool and Columns set to “Automatic based on Screen Width”. Everything looks fine until you start decreasing the screen-width to tablet/mobile size. At that point, they are still displaying in a 2 column format but the featured image is cut off, as well as the post headline. I would like for the posts to break out of the 2-column format and stack on top of each other (100% width) once they start getting down to these screen sizes. How would I go about doing this?
Actually, I changed it from “Perfect Automatic Masonry” to “Perfect Grid” and now it’s behaving as I hoped.
My question now is – how can I force the images to all be the same height?
Hey!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
.page-id-12 figcaption.av-inner-masonry-content { min-height: 156px; }Regards,
YigitThanks,
I did that and made a couple other CSS adjustments but it’s still not exactly what I want. I like the height of the image but now the excerpt portion is being covered by the images below it. How can I make each post preview taller?
Hi!
Can you please post a screenshot and show the changes you would like to make? I checked your website and captions look fine on my end. Please see screenshot in private content field below
Cheers!
YigitSorry for the delayed response. So, there are a couple things going on. I made some CSS adjustments that helped in “full screen” width but I had to hide the excerpt to get it to display the way I wanted.
If I adjust my screen width to a “medium size” on my desktop the post titles start to get covered up by the image – until the screen goes to a small size and the posts “stack” on top of one another. Even then, a small portion of the title gets covered up.
If I look at the site on my phone, that problem doesn’t exist – BUT the images aren’t as “tall” as we would like.
See screenshots and CSS currently applied to our Blog page in Private Content.
Hi!
Thank you for the info. Please remove all css modifications then replace it with the following:
.av-fixed-size .av-masonry-entry.av-landscape-img .av-inner-masonry-sizer { padding-bottom: 100%; }If you need to apply this on smaller screens, use css media queries.
Cheers!
IsmaelHi Ismael,
Thanks for your response. I did that, and it’s a lot closer to what we’re looking for but not quite there.
First – we would like the images to be the same height no matter what the screen size and not too short. Currently, at smaller screen sizes, some images end up taller than others and the height of the preview image can get rather small sometimes.
Second – we want the Blog headline text to be a little bigger, around 20px. When I try to apply that style, it affects the height of the images; to the point where sometimes the images are completely hidden.
See attached screenshot. Thanks.
Hey!
The images don’t have the same height because some of the title are longer than the others. In turn this will expand the title container covering more of the images. Limit the title characters, make sure they are contained on a single line or set a minimum height to title container:
.av-fixed-size .av-masonry-entry .av-inner-masonry-sizer { padding-bottom: 120%; } figcaption.av-inner-masonry-content.site-background { min-height: 106px; }Best regards,
IsmaelPerfect. I modified this a bit to force the images to be the same size at all screen widths and made the titles larger. This ticket can be closed. Thanks again!
figcaption.av-inner-masonry-content.site-background {
min-height: 130px;
max-height: 130px;
}.av-masonry-entry .av-masonry-entry-title {
font-size: 18px;
}
- The topic ‘Problem with Masonry Blog Posts on Mobile’ is closed to new replies.