Streaming live at 10am (PST)

Navbar/footer smaller than page width on mobile phone


#1

Because the body has variable sizes, depending on CMS content length, the footer has to be Position: relative instead of Position: fixed.

However, when we set the footer to Position: relative, then there’s a white space to the right of the webpage for mobile views. Even though I set the width:100% for both the navbar and footer.

Note, the mobile page shows up correct in Webflow, but if tested on an actual mobile phone, the navbar and footer do not span across the entire width (test on mobile phone): http://ecstaticlife.webflow.io/calendar

Any chance someone could take a look?


Here is my public share link: LINK


#2

Hi There,

I did look into your site and I see many things wrong.

You specify at lot of fixed width and height for many elements - Stick to Percentages - Research VH, % Width. This keeps it easy to make it responsive.

Secondly, you have a main section that is relative and kind of have all the other elements in absolute positions. This means - you will need to micro manage and measure every element into place. Otherwise they will remain absolute.

Its just simpler to stack them on below the other - Section -> Container -> Slider next section so on and so forth. This way you don't need to work on all dimensions.

Does not really matter about your CMS lengths - As long as you constrain how much is being shown etc.

I would really suggest giving a couple of full site videos a go - will really clear things up.


#3

Can you please update your post with some more info? Things like screenshots and read-only links allow everyone to help you faster.


#4

Hi @ConsciousApps, thank you for posting, your participation is valuable :smile:

I took a quick peek, and from I can see, there is some overflow on the page caused by 770px fixed width on the Email signup Form class. I would recommend to set that to 75% or a width of your desire... then check again if you have any overflow issue.

If there still is overflow, let me know, I am happy to take a further look. Cheers, Dave


#6

Thank you, @mayhemonger! I’ll take a look at your suggestions and will implement them. Best.


#7

Thank you, @cyberdave, and @mayhemonger. Unfortunately, neither of your suggestions have worked so far. Any other ideas?

It appears it has to do with whether the footer is set to position: fixed (in which case it works), or if it is set to position: relative or position: auto, in which case it doesn’t work (see screenshot). If footer is set to position: fixed, however, it won’t show up in its appropriate position, unless I set a fixed position (which, as I wrote in my initial post, changes on other pages due to various CMS lengths). @thewonglv, here’s a screenshot:

@mayhemonger, the reason I have to use fixed heights in many cases is because I’m implementing a special feature by which a div Detail container has to change upon changing of tabs, and Detail container is located below actual tabs.


#8

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