Streaming live at 10am (PST)

Logo stretching on mobile


#1

I'm having a hard time figuring out why my logo on mobile is stretching when I actually look at on my phone. It looks fine in the preview but looks wonky when I look at the link on my phone.


Here is my public share link: https://preview.webflow.com/preview/the-eastland?preview=57b06d47fe82511ac94c58ea2273249f


#2

See how the height value is inherited (orange) here?

Type in Auto acutally, to pass it blue:

Do this for logo and container. Can you try that?


#3

Hi @sarastrese1

I took a look at your published site on my Google Nexus 6 and saw nothing stretching:

Can you maybe share a screenshot of what you're seeing?


#4

Hmmm, that is so odd! This is on my iPhone 6. It's like it's trying to scale itself to a certain height?


#5

try removing the height size on that image


#6

I tried what you mentioned above. Changing the auto's to actual auto's. That seems to have made it worse (stretched more).


#7

I don't see a height on the logo image to change? Am I missing something?


#8

It works fine when you remove the MIN 100% to auto on all devices, although when you do this the black line does not go all the way down on the Desktop version.


#9

Why would the desktop styling be effecting the mobile stying? Shouldn't that all be separate?


#10

Hi @sarastrese1,

Webflow is using cascading CSS styles. It is about styling objects for different viewports.
If you will look inside the exported CSS files, you will see that there is different media query (@media screen .... ) for different screen sizes.

It means that originally style properties and values will be saved for desktop screen size and they will be used for smaller screens /viewports if there will be not applied changes for the particular viewport. So all style changes that you are making for different views in designer mode going to be saved under different media queries.

Hope I was able to explain.

Regards,
Anna


#11

Ok, that makes sense! I overrode the inherited 100% min height by assigning an actual min height to the div! That did the trick! Thanks all for your help!


#12

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