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?
The navbar doesn’t load correctly in mobile view, and all of the options are obscured.
Hero sections with black boxes for text load incorrectly, with the slider buttons appearing way below the image associated with them.
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?
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.
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.
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?
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.
.
