Hi, I’m using the gallery element.
How can I remove the padding and border from around the large image, so that the image stretches to fill the full 2/3 column width (782px at full page size)
Also, I’m not sure why the thumbnail images sometimes sit one above the other like the last four thumbnails on this page, but other times fall into a strip. Can they forced to either always flow in a strip with just one thumbnail next to the other, or alternatively fall into a proper ‘masonry’ style grid.
Thanks, Richard
Hey Richard!
Try adding this code to the Quick CSS:
#top div .avia-gallery .avia-gallery-big {
padding: 0 !important;
}
Regarding the other thing i believe thats because of the different aspect ratios between the images, try adding this code:
#top #wrap_all .avia-gallery-1 .avia-gallery-thumb a img{
max-height: 100px;
}
Cheers!
Josue
Thanks Josue,
I added the max-height: 100px; for thumbnails, but that is ‘squashing’ the vertical thumbnails so they appear square.
How could I set all the thumbnails to be the same height, so the vertical thumbnails line up to be the same height as the horizontal thumbnails (reducing in both height and width to fit, not distorting)
At the moment, the thumbnails are all set to the same width, with heights changing accordingly. What I need to do is set them all to the same height and then let their widths vary.
Thanks, Richard
Hey Richard!
Change:
#top #wrap_all .avia-gallery-1 .avia-gallery-thumb a img{
max-height: 100px;
border: none;
}
To:
#top #wrap_all .avia-gallery-1 .avia-gallery-thumb a{
max-height: 100px;
overflow: hidden !important;
}
#top #wrap_all .avia-gallery-1 .avia-gallery-thumb a img{
border: none;
}
Regards,
Josue
Thank you Josue
You are welcome, glad to help :)
Regards,
Josue