Streaming live at 10am (PST)

Mobile viewport styling not behaving as expected


#1

I just finished creating my website where everything on the Desktop version looks and does as it should. However, when I view the site on a mobile device, most of the features are out of place, overlapping or even missing. The biggest issue is that there is no navigation bar so I can't access the other pages. On the Webflow mobile design page, I'm worried that if I start editing the styling then I will disrupt the desktop design.
Thank you for your help!


Here is my public share link: LINK
(how to access public share link)


#2

First we need your public link to help you (http://forum.webflow.com/t/how-to-enable-a-webflow-share-link/2573)
Also, a screen capture of what it should be and one of how it seems to bug.

Also, consider that a mobile breakpoint is not a single pixle value, it's a range, and you can vary this range within the designer to make sure your site behaves well on all screen sizes in this range. Like this:


#3

Thanks Vincent. Here is my public link:
https://preview.webflow.com/preview/amys-atelier?preview=d3db4b08374cb1fefb6e10468413afa9
As you can see in the photo below, the Menu button in mobile view is not visible, the menu only opens when I do it manually in the NavBar settings.


And here you can see that elements of the page are overlapping, when they are actually in separate sections, containers, blocks etc.


#4

Also remember that changes cascade down from desktop to mobile. So it's great that you designed the desktop size first because any changes you make to the tablet and mobile sizes will not affect what you have already made in desktop size!

Another thing that is important to remember is the orange and blue colours in the style manager. If a style is orange it has inherited the value from a bigger device size (or even a common element property - such as 'All H1 tags for example). A blue style is a style applied to the current viewport size.

Hope that makes sense.


#5

Check your elements for fixed height values within mobile view. Overlapping content is normally a dead giveaway.

For instance, your Banner element is set to 590px height. Set that to auto and change the positioning on "down arrow" to auto and your top section looks clean.

Section.Photo also has a fixed height. Set that to auto and your second example is cured.


#6

This was really helpful, thank you!


#7

Thank you for the help, I was able to solve the overlapping issue :slight_smile:


#8

The only issue I have still is the Navigation Bar. I can see it now, but it won't open when I preview the page. There is no icon or link in the bar to allow it to dropdown... I added the "MENU" text box inside it to see if I could get it to activate the dropdown but wasn't successful.

The Menu only opens when I hover over the bar, while NavBar Settings has "Open Menu" activated.

Thanks for the help!


#9

Hi @amygu3, it looks like the nav bar has been corrupted, it appears the menu button has been deleted from the navbar widget. For that menu to work, the menu button need to exist.

I would delete that navbar and recreate from a new navbar widget, and that should solve the issue.

I hope this helps, if not, let me know and I am happy to assist further.


#10

Thank you! I did this and it seemed to be working first but now I've had to keep the original one for Desktop and Tablet versions (just make it invisible on mobile) and add a second Nav Bar for mobile.
By doing this I managed to get the Menu Button on the mobile version, the only problem I have is making it appear on all of the pages, at the moment it's only on the Home page.
Would the Nav Bar appear on all mobile pages if I make it a "neon green" element in the navigator? How can I do this? Or is there another way?


#11

Hi @amygu3, thanks for hanging in there, you are exactly correct. The symbols will help you here :slight_smile: Take a peek at this course from our help center: http://help.webflow.com/lesson/symbols

Also I made a quick video:

https://cl.ly/0r3R1W1v3J3q/Screen%20Recording%202016-10-31%20at%2006.56%20PM.mov

I hope this helps, if not, let me know, I am happy to take a look further.


#12

Thank you Dave! I managed to fix the issue :slight_smile:

There are two other things I'm struggling with.

The first is that the "Go Top" button only works on Desktop and Tablet view. I believe that's because it's dedicated to a section described as the "top" of the page which doesn't exist on the mobile view (maybe because I have a different NavBar), but how can I allocate where the "top" of the page is for mobile view and have the button link to it.

The other issue is in the NavBarMobile, I've set the font when unselected to white, and to turquoise when you hover over it or when it's pressed/selected. However when I open the Menu, the current page is always highlighted in dark blue, instead of turquoise.

Many thanks!


#13

Hi @amygu3,

There are two other things I'm struggling with.

The first is that the "Go Top" button only works on Desktop and Tablet view. I believe that's because it's dedicated to a section described as the "top" of the page which doesn't exist on the mobile view (maybe because I have a different NavBar), but how can I allocate where the "top" of the page is for mobile view and have the button link to it.

Well, you will probably need to duplicate the Go Top button, and then set one to show on desktop and tablet, and one to show on mobile landscape and mobile portrait view, using the visibility settings on the settings tab.

On the mobile version, can change the ID of the section to link to, to be one that exists, because yes, if the element is not visible on the page (i.e. set to display none) the section linking will not work.

I would recommend to drag a section to just under the body, give it a class like "top-section", give it a height of 0px and then give it a new ID. Next, link to that new section you just created.

I am checking the current class item on the menu, will get back to you :slight_smile:


#14

Hi Dave, any news on the current class item in the mobile menu? Thanks :slight_smile:


#15

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