Support » Fixing WordPress » Images appear squashed on Metaslider gallery on mobile

  • Resolved victoriagreenphotography

    (@victoriagreenphotography)


    Hello there,
    Just testing the different the desktop, tablet and mobile versions on my site and discovered in my wedding gallery, the images appear squashed on mobile.

    I have had a look in forums but can’t find the additional CSS I might insert to correct this.

    Would be amazing if you could help me out with this.

    Thank you so much,
    Victoria
    @corrinarusso

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

Viewing 14 replies - 16 through 29 (of 29 total)
  • Sorry. wrong thread

    • This reply was modified 1 year, 7 months ago by ikaring. Reason: Pasted on wrong thread, sorry

    Ah, I have not checked them.

    That is because there is a rule like this.

    @media (max-width: 991px) {
        .nav-bar .module-group .module {
            display: block;
            float: none;
            width: 100%;
        }
    }

    You need to override this rule for search box only, like so:

    @media (max-width: 991px) {
        .nav-bar .module-group .module.search-widget-handle {
            display: none;
        }
    }
    Thread Starter victoriagreenphotography

    (@victoriagreenphotography)

    Sorted!!! Thank you :0)

    Although something very weird has just happened and I don’t know if it’s connected…..!

    I published the changes….all good so now you don’t get the magnifying glass on mobile….but now when I go to my live site ‘view site’ the footer looks different (pre changes). I amended the footer in customizer this morning (when you go to customize>appearance – it looks as it is supposed to do with the published CSS changes).

    Any idea why the live site is still showing pre footer changes since adding the CSS!? Utterly weird!

    Thank you again

    Well, no. I dont think they are connected.
    You maybe forgot to press Publish button? I dont know.

    Thread Starter victoriagreenphotography

    (@victoriagreenphotography)

    I definitely pressed published.

    If you look in Appearance > customiser it looks perfect. I have just looked on my mobile and looks fine.

    But if you go to Dashboard > view site, the footer is the old footer and not the new one (as showing and published in Customiser).

    Any ideas why this is happening? A glitch?

    Thank you, Victoria

    Umm, I have never encountered that situation, there is nothing to say but to provide a reference page url:

    https://mhthemes.com/support/knb/theme-customizer-not-working/

    If that persists, please make another thread for help.
    Cheers!

    Thread Starter victoriagreenphotography

    (@victoriagreenphotography)

    Hello – I have worked out that if I take the additional CSS you kindly provided:

    @media (max-width: 991px) {
    .nav-bar .module-group .module.search-widget-handle {
    display: none;
    }

    My footer goes back to how it should on desktop live site.

    However, I obviously want to keep that CSS as it has solved my issue around the magnifying glass on mobiles and tablets.

    Any idea why it changes the footer on desktop live site? It’s definitely that causing it as when I take it out, the footer looks how it should (and how I published it).

    Thanks for all your help,

    Victoria

    Hi.
    The css you pasted lacks the closing brace for @media.
    That might affect latter styles for footer?

    Thread Starter victoriagreenphotography

    (@victoriagreenphotography)

    Sorted!!!!! Thank you :0)

    Congrat!
    Please mark it as resolved.

    BTW, nice pics!

    Thread Starter victoriagreenphotography

    (@victoriagreenphotography)

    I am sorry I spoke too soon!!! The footer is showing as it shows in live site and customize, but just noticed the pesky magnifying glass is back on my top nav!!!

    I have this CSS:

    @media (max-width: 991px) {
    .nav-bar .module-group
    }
    .module.search-widget-handle {
    display: none;
    }

    I added in the bracket as you said, and it sorted the footer. But the magnifying glass is back on mobile and tablet!

    Thank you, Victoria

    Your css lacks something.
    Please compare, very carefully, your css with my css.

    Thread Starter victoriagreenphotography

    (@victoriagreenphotography)

    Hello – right, I have put your CSS back in exactly as you sent it to me. And now the footer has gone funny again in the live site as you already know about. But good news – the magnifying glass has gone as required.

    I had obviously put the ‘closing brace’ you told me to put in, in the wrong place.

    Would you mind showing me exactly where it should go in what you’ve provided:

    @media (max-width: 991px) {
    .nav-bar .module-group .module.search-widget-handle {
    display: none;
    }
    }

    I am so sorry I am being a bit of pleb. I am completely new to CSS and learning in baby steps so I had obviously put it in, in the wrong place. It got me my footer back but put the magnifying glass back in!

    Thank you for being so patient with me!

    Victoria

    It is ok, lets just fix the problem.

    Actually, I dont know what is the desired styles of the footer.
    Now I see is white background and every thing aligned center: menus, sns icons, copyright.
    Previously, it was black background and menus are aligned left and stacked vertically.

Viewing 14 replies - 16 through 29 (of 29 total)
  • The topic ‘Images appear squashed on Metaslider gallery on mobile’ is closed to new replies.