Heroimage does not work right

Hi,

could someone help me please with the heroimage of the content pages. The page works normally without heroimage, but with image the content is very narrow when I look it to mobile portrait view. What I need to do to fix the image to work properly.

Here is the screenshot from my iPhone 6.
http://www.elenkhos.fi/uudet/images/screenshot.jpg


Here is my public share link: http://www.elenkhos.fi/uudet/ryhmacoaching.html
(heroimage, narrow text)

Hi @Carina

Can you please update your post with some more information so we can help you faster? Things like screenshots and your environment info really speed things up.

Posting guidelines can be found here: Posting Guidelines for the Design Help Category - General - Forum | Webflow

Thanks in advance! :slight_smile:

Hi,
here is the screenshot from my iPhone 6.
http://www.elenkhos.fi/uudet/images/screenshot.jpg

Thanks for updating your post. Can you also post your read-only link?

The read-only link is here:
https://preview.webflow.com/preview/elenkhos-f09d82?preview=923155475efdb784e46e46d1df67869f

Hey, @Carina! The site is looking good!

The issue you describe actually stems from rigid styling. You have used precise pixel values for width and height in desktop, tablet, mobile landscape, and mobile portrait modes. These values are getting inherited by your mobile portrait mode, causing the issues you’re seeing. It’s really best to deal with %s when working with width, considering devices in every class have different resolutions.

Here’s a quick clip regarding some styling on your homepage:

And on the content page you featured above:

You’ll note on the second clip, I inserted some quick pixel values for height as a temporary measure. You’ll probably want to play around more with the styling!

1 Like

Hi McGuire,

Thank´s a lot!! I’m so grateful to you for helping me out. It was so easy to make changes with you videos. :slight_smile:

  • Carina

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.