Streaming live at 10am (PST)

Help with mobile styling

#1

Hello All,

After lurking the forums for an issue similar to mine and being unable to find the answer I’m looking for, I have finally decided to suck it up and ask for a little help from my friends.

I’ve been working on this site and thought that I have made some pretty good progress and achieved a lot of the goals that I had in mind. I feel like it looks pretty good in desktop view…but the site just doesn’t look good on mobile view. Can anyone take a look at what I’ve got going on and point out some of the mistakes that I’ve made? Did I do too much damage?

  1. The navbar doesn’t load correctly in mobile view, and all of the options are obscured.
  2. Hero sections with black boxes for text load incorrectly, with the slider buttons appearing way below the image associated with them.
  3. Pages are not showing the full width.

Here is my read only link:
https://preview.webflow.com/preview/palmbeachsymphony?utm_source=palmbeachsymphony&preview=d1919feea7d740627a92b568c466a5cc

Please let me know if I can explain these issues any better.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

#2

Took a quick look.

For issue 1, change your flex settings on the ‘container’ class you’ve got in the nav from horizontal to vertical. Make sure to name that container something more specific to avoid changes to other items with that class. Click ‘duplicate class’ and then change the settings.


2. There’s a 625px margin on the buttons, that’s what’s pushing them down.
I’m not sure what you mean with number 3, could you share a screenshot of what you’re seeing?

#3

Thank you for the speedy reply. I fixed the nav bar per your instructions!

Here are some screenshots to illustrate the 3rd issue that I am mentioning, comparing the desktop site to mobile.

As you can see, the hero image overflows and the link blocks underneath the hero image are not the correct size.

#4

for the hero, your mw ‘hero image’‘2’ div is set to 200vw. Did you do that for a specific reason? It’s making the text over the hero image cut off.
For that section with the concert info, remove the padding from ‘section 10’. I’d also use flex box rather than the ‘columns’ feature here. You’ve got the ‘columns’ field set to ‘flex’ but that gets slightly difficult to manage really. Flexbox with divs is an easier way to get a nice look.

1 Like
#5

Ha! I bet all of this seems so simple, but I’m so thankful for your help. These instructions are allowing me to clean up a lot of the mistakes that I’ve made all over the site. Thank you so much!

Next question:

On the same page, the drop down in “section 9, div block 22” that contains information about the pieces overflows to the right. Why is this happening?

#6

It looked okay to me. Have you been able to change it since posting? One thing I would say is, make sure you’ve got some more room on desktop view on the left side of the screen. This looks a bit tight.


Add some padding to ‘section 9’ like this

#7

Yes, I’ve been able to make a lot of changes since posting.

Thank you for the suggestion…I’ve gone ahead and applied the padding to that section. I really appreciate it!

I have one more big question:

A la @PixelGeek, I have created this scroll effect on my 2019-2020 season page.

For some reason, the footer’s black background doesn’t appear on this page:

Also, is there a way for me to replicate this in mobile:

#8

Looks great @bnorris, love the effect. Set your footer’s position from ‘static’ to ‘relative’ :slight_smile: .

. I’m not sure what you meant with your last question. I saw the images change as a scrolled down. Is that not what you want?

#9

Is there way to make the background and text in each section fit the screen size in mobile view?

And thank you!

#10

on ‘masterworks 1 section’, change the width from 1000px on mobile to ‘auto’. Think of using pixels (px) as a fixed width, kinda like a 10inch long stick. It doesn’t change based on what’s going on around the stick, it’s always 10 inches, no matter what.
Changing it to ‘auto’, or using percentages, means the content can resize based on the screensize.