| |

How to remove whitespace on the right side of mobile and tablet view in Astra theme

One of my clients asked me to fix an error in Mobile view of his website. It’s using Astra Pro theme with Thrive Architect page builder.

Mobile View – There is an extra white space to the right (left and right scrolling) caused by the tiny scroll to the to button.

Client’s Comment

Here is how I remove whitespace from the right side of mobile and tablet view by adding the following custom CSS code in Customizer > Additional CSS section

I’m targeting the Mobile and Table screen which max-width is 768px

@media only screen and (max-width: 768px){
	html,
	body{
	width:100%;
	overflow-x:hidden;
	}
}

Hope it’s helpful for you. Enjoy šŸ™‚

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

54 Comments

  1. Thanks so much Tawfiqur! I had this very problem and instead of needing to put time in finding out the exact cause, I just added this line of code and it worked! šŸ™‚

    1. **just to correct my previous question and this is the correct question
      How to remove whitespace *above nav bar menu in mobile and table view for astra theme

  2. AWWWWESOME! best solution! saved my problem instantly! It saved me lot of time going through each elementor section.

      1. Your solution has helped me a lot and is working but when i set the overflow-x:hidden; in under my css for the website, it also disables my scrolling on the website when im using my mobile (iphone ios). I have tried with many things such as -webkit-overflow-scrolling: touch; to make it scroll but it is just stuck in the top.

  3. I wonder if you could help me, I have two pages which show a white right-sided margin ONLY on the MOBILE screen. I am using Elementor with WordPress and an Astra Theme. I tried putting the code you kindly gave in the Additional CSS under the customize but it seems to be to no avail. (It may be me – but I did just cut and paste what you had.) I have been pulling my hair out about this. Can you help me. The situation is on the homepage and the item called ‘Life Affirmation’ in the Prison Logs. All other pages seem static (i.e., don’t have the movable feast which is the white section to the right.) I do so hope this makes some sense – and I thank you for your kind consideration in advance. Bless you for ALL.

  4. Hi Tawfiqur,
    I’ve used your code in the customiser under additional CSS. The white has indeed gone but I now can’t scroll down my page. Any idea why this is happening?

  5. Hey man,

    You saved my life! I’m a Shopify developer but there was an offer that I couldn’t refuse so I accepted a WP project. They use The Astra Theme with Elementor, with Shopify unwanted spaces aren’t an issue so I was puzzled with this one. I was in a call with my clients and I found this article just within the meeting and when it was my time to present my work, I did it smoothly with the help of your blog.

    You earned a fan, Tawfiqur. I’d be forever grateful to you.

  6. Hey bro i’m designing website with astra theme elementor pro and crocoblock i’m facing same issue please could you help me out to remove right white space on tablet view

  7. I Found this solution and it worked, the best way to fix this is to find the element that’s causing the overflow. just type the following code in the console and it will show you which elements, then you can fix it or remove the whole element:

    var docWidth = document.documentElement.offsetWidth;

    [].forEach.call(
    document.querySelectorAll(‘*’),
    function(el) {
    if (el.offsetWidth > docWidth) {
    console.log(el);
    }
    }
    );