Mobile image order + paging

  • Resolved iconphotoco

    (@iconphotoco)


    4 years, 11 months ago

    I am so stuck and frustrated with my gallery on mobile.
    I updated images today and while the gallery looks like it did before on desktop (just with new pics), the mobile version is all janky. Here’s what’s happening:

    1. the image order is reversed, despite having selected “Title–alphabetical”
    2. the images are displaying at the left of the screen with paging dots to the right. I selected “bottom” for paging–no change. I disabled paging–no change.

    Here is the page in question:
    https://datingphoto.co/dating-profile-photo-gallery/

    I have duplicate galleries (one with 2 columns for desktop, one with one column for mobile) because the custom code that was shared in this forum for changing column numbers according to screen width never worked for me. I can’t figure out what is going on.

    Please help! I am so frustrated and have spent the better part of a day on this. I am a photographer so i need to be able to easily update the images in my gallery.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter iconphotoco

    (@iconphotoco)

    4 years, 11 months ago

    Update: The mobile page looks fine now, not sure why.

    Still wondering: is there a way to not need two totally separate galleries if I want 2 columns on screen widths below 768? It’s causing me so much extra work to maintain redundant galleries. please help.

    Plugin Support elviiso

    (@elviiso)

    4 years, 11 months ago

    Hi @iconphotoco

    I would not recommend you have 2 galleries on the page as that will slow your page load times down.

    The only way to get what you want is with some custom CSS. To make the gallery having 2 columns to have only 1 column on mobile devices, you can use this CSS snippet:

    @media screen and (max-width: 768px) {
    .foogallery.fg-masonry.fg-col2 .fg-item {
		width:100%;
    }
    .foogallery.fg-masonry.fg-col2 .fg-column-width {
        width:100%;
    }
}

    Kindly try this and let us know how it goes.

    Kind regards,
    Elvis.

    Thread Starter iconphotoco

    (@iconphotoco)

    4 years, 11 months ago

    Hi @elviiso ,

    OMG IT WORKED!!! Thank you so so SO much! Huge gratitude @elviiso. This is a game changer for me.

    • This reply was modified 4 years, 11 months ago by iconphotoco.
Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Mobile image order + paging’ is closed to new replies.