Tagged: , , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • October 6, 2015 at 12:42 pm #514343
    richardelectrix

    Hi

    I was using a Masonry gallery to display images, but it doesnt work in IE8 as all of the images are zoomed in.

    I was going to use the normal image gallery, but it doesnt work very well on a mobile (it just shrinks all of the images down). If you have 4 columns in the gallery they are barely readable.

    Therefore unless anyone has alternative solutions, I am having to resort to 4x 1/4 column sections across my page with an image in each.

    This works on IE8 and mobile but a) the images go a little jagged – dont appear as crisp as they do in a gallery, b) there are large gaps between the 4 columns.

    How can I reduce the gap between the four columns? I know I can give these particular columns their own css name, but how do I reduce the column gaps and increase the image sizes?

    October 6, 2015 at 3:49 pm #514465
    Elliott

    Hey richardelectrix!

    Add this to your custom CSS.

    <style type = "text/css">
#image-gallery div .av_one_fourth {
    width: 25% !important;
    margin-right: 0% !important;
    margin-left: 0% !important;
}
</style>

    Regards,
    Elliott

    October 6, 2015 at 3:53 pm #514470
    richardelectrix

    Hi,

    Is this relating to using the 4x 1/4 column sections?

    October 6, 2015 at 3:54 pm #514473
    Elliott

    Hey!

    That’s what you wrote your post about so yes.

    Cheers!
    Elliott

    October 6, 2015 at 4:06 pm #514492
    richardelectrix

    Hi

    That doesnt appear to be working.

    I have called the 1/4 containers css image-gallery-quarter

    And used this code …

    /* Image Gallery Quarter */

#image-gallery-quarter div .av_one_fourth {
    width: 10% !important;
    margin-right: 0% !important;
    margin-left: 0% !important;
}
    October 6, 2015 at 5:23 pm #514613
    Elliott

    Hi!

    Why are you not using the code I provided?

    Regards,
    Elliott

    • This reply was modified 9 years, 1 month ago by Elliott.
    October 6, 2015 at 5:31 pm #514626
    richardelectrix

    That works now.

    October 6, 2015 at 5:51 pm #514646
    richardelectrix

    It works well, but on mobile all of the images have shrunk down to 25% size.

    How can I exclude mobile from this css?

    October 7, 2015 at 7:35 am #514949
    Rikard

    Hi,

    Try this instead: 

    <style type = "text/css">
@media only screen and (min-width: 768px) {
#image-gallery div .av_one_fourth {
    width: 25% !important;
    margin-right: 0% !important;
    margin-left: 0% !important;
}
}
</style>

    Best regards,
    Rikard

    October 7, 2015 at 9:26 am #515041
    richardelectrix

    Hi that works perfectly.

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘1/4 Page Element Padding between 1/4 Columns’ is closed to new replies.