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 š
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! š
How to remove whitespace after nav bar menu in mobile and table view for astra theme
**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
Hello Kate,
Can you please send me a screenshot of your issue?
Hi mate,
I am having the same issue. Can you please contact me.
Thanks
Hello Ian,
can you attach a screenshot of your issue at prnt.sc and send me the link.
Thanks a lot
Your tutorial is short, but it’s very helpful. My problem has fixed after applying your solution. Thank you so much, Mr Tawfiq.
happy to know that.
AWWWWESOME! best solution! saved my problem instantly! It saved me lot of time going through each elementor section.
I am using elementor (not a pro version). How can i remove rights pace without using css.
You don’t need the Elementor pro version to apply this solution. Theme’s customizer Custom CSS option is enough.
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.
Im having the same problem, have you found a solution by any chance? š
Same problem here (iOS mobile) please can you share a solution?
Same problem here on my checkout page .
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.
Yeaahhh It did the magic… Thank you!
Hey Tawfiqur,
Thanks man. It worked like a charm. š
Wow, thanks!. i only used it for the body, didnt really work. But once i added html, it did. Thanks!
Wow
Thank you so much Tawfiqur
This is useful to help remove the extra white space
thanks a lot dude
Just wow…Thanks!!!
Thank you so much , that small code solves the issue that i was facing in mobile view .
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?
This worked for me- super helpful thank you so much for sharing!
Thank you so much!
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.
Thank you! Great fix!
Great! Thank you!
omg thank you man! really appreciate it!
Thnx sir for this help.
Thanks!! You’re awesome!
Worked really well, thank you!
wow wow wow!! You saved me a lot of time buddy, Thanks you so much
perfect fix, thank you!
Thank you . It worked for me
It worked! Thank you so much.
omg THANK YOU. this was killing me.
This was killing me for quite a while.
You’re a life saver!
THANK YOU!
Thank You so much you are a pro
Thanks a lot, Tawfiqur!!! It worked just fine!
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
I never comment. Thank you so much for this! Saved me hours of trying to figure this shit out.
Hi Arslan, please send me your website url so I can check it myself. Thanks
Thanks so much, I have been looking for a solution for more than 3 hours. Thanks a lot
broooo this helped a lot, thank you
Thank you!!! š You saved me having to figure out where this was going wrong.
Thank you so much, Iām a beginner and I appreciate it <3
This was EXTREMELY helpful fixing my mobile issue in Search Console. You are my person of the day!
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);
}
}
);
this is a life savor. thanks tawfiq
THANK UUU
Thank you very much for solution <3
This is amazing Tawfiqur! Still works in 2024. Thank you!