Images squashed on mobile version of site.

  • Resolved pirateadventurer

    (@pirateadventurer)


    4 years, 6 months ago

    Hello,

    I have an activity website that relies on pictures to demonstrate the instructions. On a PC the images are fine but on the mobile site all landscape images appear squashed horizontally, distorting the image.

    I’m pretty new to website building so if there’s an easy fix or something that doesn’t involve much coding that’d be really great!

    I’m using the theme “Hotel Booking”. When I add a picture to the site I upload it via the ‘media centre’ then resize it using the resize tool on the ‘edit block’ pane.

    The link is for one of the pages where this issue can be seen but it’s a site-wide problem.

    Thank you!

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author webdzier

    (@webdzier)

    Hi,

    We have checked you have uploaded large size your first image in footer widget, also resizing large size in mobile width, so why it’s showing “squashed horizontally”

    You can upload same size according to your other size images.

    Also, we have made a solution to display the same size as your first image on mobile.

    Please add below CSS in Additional CSS in theme Customize.

    @media only screen and (min-width: 200px) and (max-width: 768px) {

    .footer-widget .wp-image-161{
    max-width: 300px !important;
    }

    }

    Thanks

    Thread Starter pirateadventurer

    (@pirateadventurer)

    Hi, Thanks for taking the time to reply. Just to clarify, the featured image for the page and the images embedded into widgets (footer and a sidebar one on the contact page) look fine. I’m happy with those. My problem is with the images in the main part of the page. For example, on this page:

    https://bundleofmonkeys.com/crafts/paper-fire/

    – The first picture is a featured image and it’s fine.
    – The second picture’s distorted on mobile screens (it looks fine if you open the page on a PC).
    – the third picture is two pictures joined and uploaded as one picture. It’s landscape orientation and is very distorted on mobile screens.
    – the fourth picture is distorted, like the second one.
    – The fifth and sixth pictures are portrait pictures and look okay.
    -The four footer pictures (all monkeys) are fine.

    I hope that makes the problem a bit clearer.

    Thanks

    Thread Starter pirateadventurer

    (@pirateadventurer)

    It’s sorted now.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Images squashed on mobile version of site.’ is closed to new replies.