Venture Theme Problem (big black bar)

Tourist
10 0 2

Hello,

I have the Problem of a big black bar on the right site of the page. Only on mobile and only if I am on top of the page and swipe left on the left.

Can somebody help me? 

 

Best Regards

Robert

0 Likes
Tourist
10 0 2

I have attached a photo of the problem. Also there is a problem if I want to scroll down the site is popping back at the top for one time.

All the problems are only in the mobile view.

0 Likes
Shopify Expert
9800 91 1553

A link to the site would be the first place to start. An image - although useful in a sense - is not going to get you much help.

All I can assume at this stage is that you have something on the page that is wider than the page itself. Video is a common one as it can be easy to forget to add it in a way that scales.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Tourist
10 0 2

 

 

0 Likes
Tourist
10 0 2

Unfortunately in there isn't a picture wider than the page itself. Because the black bar is on every page if you scroll left at the top.. 

I assume that there is something wrong with the header, but I don't know what.

0 Likes
Shopify Partner
1838 173 595

Just add to your theme.scss.liquid (alternatively put it within a @media query so it only affects mobile though it shouldn't hurt any size)

body {
  overflow-x: hidden;
}

Hope this helps!

I turn coffee in to code - since 1998
0 Likes
Tourist
10 0 2

Thanks for your answer @Karl Offenberger. I tested it, but it doesn't helps.

Any ideas?

0 Likes
Shopify Partner
1838 173 595

Ah, meh. My bad, overflow-x: hidden doesn't work on mobile browsers when applied to <body /> element. You need to apply the same to the offending element which I think is the <div /> with ID shopify-section-header.

So instead of

body {
  overflow-x: hidden;
}

That we added earlier, do

#shopify-section-header {
  overflow-x: hidden;
}

 

I turn coffee in to code - since 1998
2 Likes
Tourist
10 0 2

Thank you so incredible much! That works for me!!!

So the solution:

Code->Assets->theme.scss.liquid

add at the bottom:

#shopify-section-header { overflow-x: hidden; }

 

0 Likes
Shopify Partner
1838 173 595

Gern geschehen ;-)

I turn coffee in to code - since 1998
0 Likes