Streaming live at 10am (PST)

Help with mobile styling

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:

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)

1 Like

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?

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.

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.


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?

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

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:

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?

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

And thank you!

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.

Sarah! You have been so helpful. I wish that I could repay you some how. I really appreciate all of your assistance.

1 Like

Aw, thanks so much @bnorris. That’s what we’re here for! Glad you were able to implement everything :slight_smile: .

1 Like

I’ve made great progress thanks to your advice, but now I am back with another question:

I was viewing the desktop version of the site on a large screen, and I noticed that a lot of the content that I thought was centered is no longer centered. Is there a way to alter the settings for larger screens, or is this a result of clunky design?

Screenshot from large screen:

Screenshot from laptop:

Change your ‘content wrapper’ and ‘mid section wrap’ display from ‘inline-block’ to ‘block’. This fixes it.

Thank you…again!

If you ever find yourself in South Florida, and want to enjoy some classical music or any fun cultural activities, please reach out to me. You’ve been such a great help.

1 Like

i’ll keep it in mind :slight_smile: .