Streaming live at 10am (PST)

Page not resizing correctly when switching to mobile


#1

Hello, I'm having an issue with my website. When it's in desktop mode, it looks fine, but when I switch to mobile either landscape or portrait.

Here is my public share link: https://preview.webflow.com/preview/post201-ebe9af?preview=d8a1d4943608c0d684a38362440e1dec

DesktopMode

Mobile Landscape

Mobile portrait


#2

That is because you have not customized those breakpoints yet.

After you click on one of those tabs, go ahead and select one of your elements and change it so it looks the way you want it at that size. Webflow creates CSS that will vary depending on the size of the screen.


#3

Hi @BlueEyes92117

Thanks for posting.

@Cricitem has it right. You will need to make style changes to each of the breakpoints so they appear as you want them to.

Here is a great resource for responsive design basics: https://help.webflow.com/video-tutorial/the-basics-of-responsive-design-workshop

And here is a one on responsive typography: https://webflow.com/workshop/best-practices-for-responsive-typography

Here are some suggestions I have to help you make the site more responsive: https://cl.ly/3u3U191H1B1l


#4

I'm not sure what you mean by "customize breakpoints". When I try to customize for the different screen it affects my main desktop version.


#5

Can you give an example of a field that you've customized for a lower breakpoint, that it changed the desktop version? It shouldn't be doing that.


#6

For instance, if I click on the mobile-portrait, the Nav bar will not show correctly. If I remove any of the images, i.e. the US Navy, etc. I removes it on the desktop as well.


#7

Ah. Removing an element is different from styling it. If you want something to only show up on desktop, then what you do is select it on desktop, then switch to tablet and click the display:none button, and that will hide it on anything smaller than desktop size.

The navbar is an example of something that you need to style separately on each breakpoint. I haven't looked too deeply into your project, but my bet is not that the navbar is disappearing, but that it is being covered by something else when the screen is too narrow.


#8

Even though I've unselected items on the navbar(i.e. all of the symbols for USNavy, US Marines), the links(i.e. Home, About, Photos, etc) still do not show up on the mobile landscape or portrait views.


#9

This is CRAZY! After I selected those items to not show on the mobile view, now the entire NAVBAR is missing on the Desktop view!


#10

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