Section not responsive in Google Chrome

Design help General
1

The top of my site that has a background picture and a container is responsive in Webflow but it isn’t responsive in Google chrome or on my phone. However, the rest of the site looks good it’s just one section, where it says “You Create It I Imagine It” . Please HELPPPPPPPPP

Here’s my link

https://preview.webflow.com/preview/mkhs-five-star-project-74d879e51e7b80ca?utm_source=mkhs-five-star-project-74d879e51e7b80ca&preview=398105e2b91e97df2792d1d26d25dadf

And here’s my site.

https://www.mkhdevelops.com/

2

Hi @mkh_develops

I’ll try to help you, but I hope you can you elaborate a bit more.

  • What do you mean by “isn’t responsive”?
  • What’s the expected behavior?
  • What is actually happening?
  • Is your phone Android or iPhone?

I assume you are trying to vertically center the text regardless of the screen size, am I right?

3

Well, the container doesn’t stay in a fixed position for any phone size. For the iphone 5, you won’t see the arrow anymore, for the iphone 6,7,8, you’ll see it partially, for the iphone 7 plus it’s finally shows the way it’s supposed to. But for the ipad’s the container is too far at the top rather than in the middle of the screen. I used margin to position the container in the section so I’m not sure why it’s not staying in place

4

Is this that you’re looking for?

If so, what I did was, step-by-step (not everything will be necessary, but I made some clean up to prevent future errors):

  • home:
    • Desktop Layout
      • Add Position Relative
  • homeContainer
    • Desktop Layout
      • Change Display to flex
      • Remove the padding-top
      • Change Position to absolute, top and bottom to 60px, left and right to 0
    • Mobile - Portrait Layout
      • Remove padding-top
      • Remove Display and Flex overrides to prevent future errors
    • Tablet Layout
      • Remove margin-bottomto prevent future errors
  • arrowimg:
    • Desktop Layout
      • Remove Display Settings
      • Remove top and bottom margins
      • Change position to absolute, click Bottom
    • Tablet Layout
      • Remove margin-top and top overrides
    • Mobile - Landscape Layout
      • Remove top override
    • Mobile - Portrait Layout
      • Remove margin-top and height overrides to prevent future errors
  • headerBtn
    • Desktop Layout
      • Remove padding-left to prevent future errors
    • Tablet Layout
      • Remove clear to prevent future errors
    • Mobile - Portrait Layout
      • Remove margin-top and min-height to prevent future errors

As a final touch, delete the space character between the words I and Create and enter a non-breaking space using the shortcut Shift + Space. That way the I Create It will stay on the same across all break points.

5

You’re amazing man… Trying this now! Thanks!!!

1 Like