Streaming live at 10am (PST)

Responsive Webdesign section height


#1

Hey Webflow Community,

I am totally new in webflow and just created the landigpage

https://preview.webflow.com/preview/ristorante-riviera?preview=73d2ad6f0220af37a6720bdeb1195023

I have an issue with the mobile view.

In the section 'Willkommen im Riviera' the height of the section is on desktop Perfect but on mobile iphone 6 too long. But Everytime i decrease the height the text of the section is on the iphone 5 in the other section 'Auswahl unserer Speisen'?

What can i do to control this?

Thank you


Here is my public share link: [https://preview.webflow.com/preview/ristorante-riviera?preview=73d2ad6f0220af37a6720bdeb1195023]
(how to access public share link)


#2

Hi @EnzoG,

Your public share link doesn't seems to work, can you take a look please ?


#3

sorry @zbrah ,

this should work:

https://preview.webflow.com/preview/ristorante-riviera?preview=73d2ad6f0220af37a6720bdeb1195023


#4

@zbrah i think the problem is margin and padding due to my not perfect css skills :grimacing:


#5

@EnzoG

Did you solved it ? Looks good on your Webflow link.
Ahah no problem, it happens :slight_smile:
I think I would have hide the style div on mobile if i were you btw :wink:


Would be easier to read if it just took the entier div width i guess.
I also think you loose the menu card idea on mobile, so this grey div is not important.
Anyway great work so far :smiley:


#6

@zbrah Thank you :slight_smile:

My problem is that in the editor on mobile view phone portrait the section with the gray background ends directly after the text "this is some text inside of a div block" but when i view the website with my iphone 6 there is much more space between text and the end of the section :slight_smile: i hope you understand me.

when i check the mobile view with the chrome developer tools the space gets higher with iphone 6 plus etc...

what can i do to solve this problem.

thank you for your feedback


#7

Ok @EnzoG

It's because you have a fix height on section2

Just give it height auto and play with padding


#8

thanks mate @zbrah :smile: now i solved it.

last question: how can i define that the grey div only appears on desktop not mobile? when i remove it from mobile it also removed from desktop.

thank you


#9

You set it to "display:none" in the mobile views, instead of deleting it.


#10

No problem :slight_smile:
Yes just as @uzzer said


#11

@EnzoG

If it solved your question can you please check the solved box so the topic can be closed.
Thanks,


#12

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