Support » Theme: OceanWP » Mobile Version: White Area right side

  • Hello,

    While browsing thru my mobile version I saw a white area on the right screen side where I can scroll to. There is non on the left. (360px view)

    Does not happen at tablet view (756px).
    I want to remove that white space but don’t know where.
    I am using OceanWP and Elementor / +pro.

    Here are 2 screenshots of my view
    https://ibb.co/c7L17p
    https://ibb.co/kCu5YU

    Can anyone help me with that problem?
    Thanks a lot!

    The page I need help with: [log in to see the link]

Viewing 15 replies - 16 through 30 (of 83 total)
  • ndlondon

    (@ndlondon)

    I added the following:

    html,
    body{
    width:100%;
    overflow-x:hidden;
    }

    and it stopped the sideways scroll on the smartphone but on the PC, I lost my sticky-header!?!?!

    Any solution?

    Amit Singh

    (@apprimit)

    Can you please share your site link so that I can check it?

    dandyvn

    (@dandyvn)

    Hello,
    I have the same problem only on my starting page. I use the hamburger menu with the side menu opening on the left. When I enter the code it helps to keep the site clean of the white space on the right side, but when I click on my menu the page goes completely blank.
    I tried applying the code on the whole page and on a single page – it is the same error whatever I do. This is occurring on tablet and mobile, the desktop is fine!
    Can you help?
    thank you!!!

    Amit Singh

    (@apprimit)

    @dandyvn can you please share your site link so that I can check it?

    dandyvn

    (@dandyvn)

    Thank you Amit,
    it’s the starting page here: https://www.muc-sf-festival.com/

    wow again @alexislass that code fix everything, I couldn’t find the element that caused this problem, but your code fixed everything, thanks again that bug It made me crazy.

    @alexislass – it worked instantly!!!

    Easy made with WordPress Customizer:

    1) Klick on Customizer
    2) Additional CSS
    3) Insert the Code of Alexis
    4) Save
    5) Workes

    Thank you so much! Saved a lot of time for me.

    Thank you so much @alexislass
    Brillant worked perfectly.

    I am using Oxygen page builder and this solved the white space on right hand side issue.

    Appreciate you taking the time to help. 🙂

    you can also try this, it shows you exactly what section or element goes overboard https://elementorcodes.com/remove-elementor-horizontal-scroll-mobile/

    @alexislass Still helping people 7 months later! Thanks!

    I’m glad I could help you !
    Good job.

    Hi! I had and have the same kind of problem. When going to my home page first time via mobile, the text was starting right from the left side of the screen and there was some extra background image showing on the right side of the screen. I used @alexislass’s solution and it helped.

    But. It helped when going to the site first time; Now text is centered like it should be. But when going to the site second time (cookies un-reseted), the problem recurs. What should I do now? Any ideas? Thank you in advance!

    I use Sela theme, and the problem is occurring with all browsers in my IPhone 6 (with quite small screen with modern standards).

    An even easier way I’ve found is by going into each section and go Layout > Overflow and select hidden. Usually it’s only one section messing up your page.

    Go to the theme customizer. Add this code in additional CSS.This will remove the additional space on either side.

    html,
    body{
    width:100%;
    overflow-x:hidden;
    }

    I have covered this issue in a detailed article

    https://webdesignagencysg.blogspot.com/2020/02/remove-white-space-on-right-side-mobile-view.html

    • This reply was modified 1 year, 7 months ago by ariamathew.

    Few days ago I had the same problem with my website https://www.pureshilajit.co.in and tried to resolve such problem with above method by putting code
    html,
    body{
    width:100%;
    overflow-x:hidden;
    }

    into CSS but the same did not work for me and after that, I had started Hidding Element/Banner/Corosoul from my Home Page where the problem was persisting. Middle of hiding these element one by, one of “Corosoul” found which was the cause and creating a gap in the mobile view.

    So after disabling or hiding such “Corosoul” my website was working fine but later I recreated that same “Corosoul”.

Viewing 15 replies - 16 through 30 (of 83 total)
  • You must be logged in to reply to this topic.