0

I would like to ask you guys questions. Already set up custom css for mobile

    @media only screen and (min-device-width: 601px) and (max-device-width: 736px) 
@media only screen and (min-device-width: 300px) and (max-device-width: 600px)
@media only screen and (min-device-width: 300px) and (max-device-width: 600px)

Everything works right on posts and pages. But when I'm on the homepage, if I move my finger to the right, the page scrolls to right. I want it to be static like it is on pages and posts. Can you help me, please?

Page anypredictions.com

2 Answers 2

0

try adding overflow:hidden to the .wrap

    @media only screen and (max-width: 767px)
#wrap {
    width: 100% !important;
    overflow: hidden;
}
2
  • I added #wrap and it does not work. Any suggestions please?
    – Mike Woods
    Commented May 26, 2020 at 3:31
  • Did you use the !important with the width Mike? I tried this using web developer tools on your site and it works for me. You could try making it 95% instead of 100... Commented May 30, 2020 at 5:02
0

This just means you have an element breaking the constraints of the screen width; I bump into this issue every few sites when I’m building. Start first by looking at any fixed or absolute positioned elements. Then start looking at elements where you may have declared a fixed ####px value for their width. If that fails I usually open my Dev tools and hover over elements in the code view and see what their computed width is. Last option, at the top of your CSS file add:

html *{border:1px solid #000;}

That will add a black border around every element. Then find which one stretches past the right of the screen and adjust what needs to be adjusted.

Update:

I just tested my answer myself, made every element have a pink border and honestly, it looks like this is part of the problem:

.vc_row{
  margin-right:-15px;
  margin-left:-15px;
}

You have a bunch of div tags that look like this one:

<div class="vc_row wpb_row vc_row-fluid vc_custom_1590328177632 vc_row-o-equal-height vc_row-o-content-middle vc_row-flex">

And they're all breaking the constraints of the page. Not just on mobile, but even on desktops. May want to check with the the OceanWP development team or the people at WPBakery and see if they can sort it out. With these page builders and third party themes, you're building your site by toggling settings here and there and quickly lose track of where you set something that could end up having a cascading effect on your entire page.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.