Hi there – I’ve added a fullwidth masonry portolfio to the home page of my dev site here
http://shortiedesigns.com/site/
You’ll notice that at some viewport widths the images line up but there is a space after them – and sometimes they line up well.
Is there a way to make sure this gap disappears (see screenshot)
http://awesomescreenshot.com/06f2vc2ta6 (screenshot showing gap)
http://awesomescreenshot.com/00a2vc354f (showing at a wider width where it’s fine)
Do I need to make the featured images a larger dimension? all these image dimensions are 700 x 600px.
Cheers
Hi ShortieD!
You should add following code to Quick CSS in Enfold theme options under General Styling tab and adjust for each brakepoints using media queries
@media only screen and (min-width: 1140px) {
.av-masonry-entry { width: 30%; }}
Regards,
Yigit
okay thanks
I tried to add that code in my child theme’s css but I just got a gap on the right side – see here
http://awesomescreenshot.com/0322vklla2
I tried adding margin: auto but didn’t help
this is my code
@media only screen and (min-width: 1140px) {
.av-masonry-entry {
width: 30%;
margin: auto;
}
}
any clues?
Hey!
Because of how the masonry script works there will be points at which the whitespace will appear. There isn’t anything we can do about it at the moment unfortunately.
Cheers!
Devin
hi Devin – a shame – I thought the theme was responsive – would changing the image dimensions work?
Hi!
You can try adjusting the code i posted here – https://kriesi.at/support/topic/how-to-line-up-my-portfolio-masonry-images/#post-270736
to change sizes on different screensizes. But as Devin mentioned, there is not much we can do as it is the way it works
Best regards,
Yigit