On mobile: images not centered

  • Resolved styzer

    (@styzer)


    1 year, 9 months ago

    Hi, so I used a block to display a “gallery” of 4 images, that I use as links to content my client want featured on the homepage. It’s working great! Except on mobile, where the images should ideally show in pairs. There is enough room for two side by side if they also get resized.

    But there is a large margin on the left of the gallery, which forces the 4 images to show stacked vertically. How could I fix that? I’m good using CSS if needed.

    Thanks!

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support Carlos Carmona

    (@cecarmona)

    Hi there, thanks for reaching out to us!

    Upon inspecting the website, it appears that the block containing the gallery (with the id=”block-2″ and the class “widget”) is set to a width of 80% on mobile devices, which is causing the space on the right to appear.

    To fix this issue, you would need to modify the CSS for this block and set the width to 100%. This will make the block take up the full width of the mobile screen and eliminate the space on the right.

    Here’s an example of the CSS that you can use to fix the issue:

    @media only screen and (max-width: 767px) {
    .home-bottom .widget {
    width: 100%;
    }
    }

    I hope this helps! If you have any further questions or concerns, please don’t hesitate to ask.

    Thread Starter styzer

    (@styzer)

    Thank you Carlos, Right now it centered everything, much nicer. However, what element would I need to create a CSS for (@media) for the images to change the Automatic Layout: Row Height, and the Image Dimensions for these 4 images, so that they would fit a width of 760px all in one row, or at least two by two?

    I can play with the size to see which works best, but I need to know which Envira element I need to call.

    Thanks again! ??

    Plugin Support Carlos Carmona

    (@cecarmona)

    Hi there,

    I’m glad to know that worked for you! If you’re looking to take things to the next level and get more control over your mobile settings, you might want to consider upgrading to the premium version of Envira. With at least the Basic License, you’ll unlock the Mobile Tab in your gallery settings, which will give you more options to customize and make your gallery even more awesome.

    As always, if you have any questions or concerns, don’t hesitate to reach out. We’re here to help you make the most out of your Envira Gallery experience.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘On mobile: images not centered’ is closed to new replies.

Tags