Misc. persisting problems

Hello,

I am close to launching our new website but I have a number of (small) issues where I don’t understand the root cause and cannot find any solution. I can share login and password to our site: http://fresh.witsenkade.nl/

  1. On mobile devices I have a green fixed bar at the bottom with 3 links: call, mail and subscribe. How do I enforce that the width of these 3 columns are the same?

  2. Regarding the same bar: there is white space on the sides and bottom of the bar. The HTML code suggests that the gap on the sides is related to Outer Spacing, but the value is set to 0px. The spacing at the bottom appears to be related to the Bar Font Dize (currently 18px). How do I remove the spacing on the sides and bottom?

  3. I have a non-sticky bar at the top of the page (100px height). When I view the site on a mobile phone (iPhone) something strange happens when I slowly scroll down. Scrolling down approx. 100px goes fine. Then the page appears to be a bit sticky in scrolling, and then the page scrolls down further. When I open the page in Safari in Mobile preview mode, the browser actually shows 2 vertical scrolling bars. It almost looks like there is a frame within a frame. Same sticky scrolling goes when scrolling up - can’t scroll all the way to the top in one swipe.

EDIT: this problem appears to be related to: body { overflow-x: hidden; } , which triggers an extra frame

  1. In the footer I have a blue bar with a menu. I copied the settings for the flex box layout from one of your examples but I can’t get it to work properly. On mobile it’s a mess. On regular screen I can’t get the columns right. Ideally I would like 2 columns of both 25% width aligned left, and the language selector aligned right.

I would really appreciate your help!

Regards, Paul

Hi Paul,

Thanks for posting in!

1.) Please make sure that your bar width is 100%. In each of the 3 column container, you can set a width of 33% so that they will have a uniform width.

2.) The space on the sides of the bar is because of the outer spacing. Please set it to zero.

3.) Please add this following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

body { 
  overflow-x: visible; 
}

Hope this helps.

Thanks very much!

You’re welcome, Paul.

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