Support » Fixing WordPress » Goran not showing properly in mobile device

  • Hi

    The website I have built is http://www.evolution-law.com. It displays ok on desktop and ipad but when viewed on an iphone it is crushed. The header photo is chopped off and looks odd. I can’t leave it like this as it looks poor quality.

    One of the support staff – Calvin – has kindly given me a bit of a steer.

    He has suggested that the image is behaving like this because I haven’t included any text and the text itself adds height to the image when in mobile mode.

    He kindly gave me this snippet to include in my homepage’s text editor.
    <article style=”height:92px”></article>

    The idea is that it will add height of 92px so it will not look weird on mobile device.

    I tried this. Pasted snippet into top of text on header page but all it has done is push the first line of text down significantly in each of the 3 formats (desktop, ipad and phone). It doesn’t look right.

    The header image is fine in both desktop and ipad but still chopped off in mobile view.

    Is anyone able to help me?? I am under quite a lot of pressure to get this website up and running correctly.

    Many thanks!

Viewing 1 replies (of 1 total)
  • Matt Knowles

    (@aestheticdesign)

    Forget that advice.

    There is a line in you CSS that specifies a min height for the image.

    .hero.with-featured-image {
    min-height:300px !important;
    }

    Because the image isn’t allowed to shrink below a height of 300px, on a narrow device, the only option is to crop the left and right sides off.

    You can change the height to something like 180px and it will work better for the proportions of the image you are using.

Viewing 1 replies (of 1 total)
  • The topic ‘Goran not showing properly in mobile device’ is closed to new replies.