Streaming live at 10am (PST)

Help with Mobile Optimization


#1

HI All,

I have been having a severely hard time getting my websites to optimize for mobile. I have scanned other forums to identify the issue and I feel I am only causing more damage. I was frustrated and needed a break from trying anymore until now. I have a few things on this particular site that are not optimizing...

  1. One problem I face is the site is not showing up responsively on each mobile platform and it has a white bar that shows up to the right (this is on my IPhone 6). I have seen other boards that have had a similar issue to this but those functions (such as body overflow hidden) are not helping.

  2. When I scroll to “What” — obviously because it’s a column it’s showcasing underneath the slider but I actually need it to be placed on top of the slider with videos and pictures scrolling to showcase work.

  3. Lastly, I am confused with how to get my form and footer to optimize as well.

Thank you for all and any help!

Cheers,
Madison


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

Link: https://preview.webflow.com/preview/simplypracticalsite?preview=983cba56eda23f521d0fa25ca2ca6cb3


#2

Hello @simplypractical

The most common thing that I see on your design is that you're using a lot of padding and margin for various elements, some sizing for fonts and line height. If you take a look at those things you'll get it right.

Here are some examples, but definitely there more of them

Currently:

Modified:

Currently:

Modified:

Currently:

Modified:

Currently:

Modified:

Let me know if that helps in any way or if you need any more help :slight_smile:

Cheers,


#3

I am fixing it up now, although something strange happens. After publishing, before the page loads completely the white side on the right is still active and when the page fully loads it will format to the screen.. Not sure why or what that means?

There is still white that appears and I am not sure what it's from...

https://preview.webflow.com/preview/simplypracticalsite?preview=983cba56eda23f521d0fa25ca2ca6cb3


#4

Sometimes that happens when you have elements that exceed the width size on mobile just select your body tag, give it a class and style it with Overflow: hidden that would do the trick. :wink:


#5

It won't show up for me which element is wider than the width.. I thought I identified but appears I did not. Are you able to locate which element is wider?


#6

Select Body element.

Under layout

Select this button:


#7

I have added this to every Body (computer, IPad, landscape, portrait), but on my IPhone even though it holds the width from of the hidden value, it still shows there is an element that is wider.. I do not know what that element is


#8

You set the body page height, remove that setting and see if that changes something


#9

Removed the setting - nothing changed.


#10

I see it right


#11

But can you still scroll to the side or is it fixed?


#12

What do you mean scroll to the side?


#13

Even though it may be fit to width when you load the site, but there is still space that appears on the left.. it's now black (was white). I don't know what element is causing that to occur


#14

I think it's the slider arrow


#15

Just tried playing around with that and the slider... not it, unfortunately :frowning:

https://preview.webflow.com/preview/simplypracticalsite?preview=983cba56eda23f521d0fa25ca2ca6cb3


#16

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