Skip to main content
higgsyd
higgsyd
Inspiring
August 30, 2022
Question

why is my image all squeezed up?

  • August 30, 2022
  • 2 replies
  • 723 views

Can any of you fine folks tell me why the image on the home page seems to be squeezed up when I view it on my iPhone and iPad?  I cannot see any CSS that would be responsible for this squeezed image.  Its fine in my Desktop view on my pc

Please view on a phone/tablet:  https://higgsy.co.uk/index.html

 

In the past the solution has always been to remove the height and width properties that Dreamweaver irritatingly adds after any insert image command.

Other images on the site all show fine on a phone or tablet

This page has remained unchanged for ages so I must add that I did recently add the Google Search bar to the page, is that the culprit in some way?

    This topic has been closed for replies.

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    August 30, 2022

    I don't know what "squeezed up" means. 

     

    At 360px width, the expanded menu is all I see.  Incidentally, I'm using Firefox's Responsive Design Mode for this:

     

     

    At 412px width and higher, it looks okay to me. 

     

     

    On larger screens the menu expands horizontally.

     

    If you can share a screenshot of your problem and the width of your device it might help us understand more.

     

    Nancy O'Shea— Product User & Community Expert
    higgsyd
    higgsydAuthor
    Inspiring
    August 31, 2022

    Thanks Nancy, this is what I see on my iPhone 12 Pro Max

    higgsyd
    higgsydAuthor
    Inspiring
    August 31, 2022

    and also on my iPad portrait

    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community Expert
    August 30, 2022

    I can't see anything on my iphone 7, the page is covered completely by the open menu and there's no way to close it currently. Looks like you're missing the starting state that you have in other media queries.

    Looking at the info from my browser's dev tools on the desktop, it appears the img is picking up the min-height:100% setting from the body. It may be worth commenting out that setting in your css to see if that's where the issue is coming from.

    Honestly, you probably shouldn't be using that image at all on phones, the orientation is all wrong for the way most people browse the internet from mobile (portrait mode). This would be a great time to get familiar with the <picture> element, so you can serve a better image to your small screen viewers...

    https://www.w3schools.com/html/html_images_picture.asp 





      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices