Thread Starter
avifb
(@avifb)
OK, with the help of claude.ai I added the following custom CSS code to keep the content fixed and properly aligned in mobile view:
@media (max-width: 768px) { .blog .container, .archive .container, .search-results .container, .category .container, .tag .container { overflow-x: hidden; } }
Hello @avifb,
Thank you for reaching out,
The issue is related to this section: https://ibb.co/WNcrc4dq. The space comes from the left and right negative margin or too much width. You should remove the extra negative margin to fix this. Also, you can use this CSS, so please put the CSS below in Customizing > Custom CSS/JS > CSS Code:
@media(max-width:768px) {
body {
overflow-x: hidden;
}
}
For more information about the CSS code on the customizer, please read this link: https://docs.oceanwp.org/article/354-add-custom-css-and-js-to-your-website
Note: if you have any cache plugin or server cache(CDN / Browser Cache and Cookies and …), you need to clear its cache contents or disable them to see your changes. Also, don’t forget to click on the regenerate all assets file and data in Elementor > Tools.
I hope it helps,
Best Regards
Thread Starter
avifb
(@avifb)
Thank you. It worked as well as the Claude solution.
I guess body {} includes all these:
.blog .container, .archive .container, .search-results .container, .category .container, .tag .container
Hello @avifb,
Thank you for reaching out,
Just to clarify, your CSS targets specific containers, so it only affects content inside them. My CSS applies to the entire body, which also covers elements outside the containers, such as advertising scripts, preventing horizontal overflow completely. Both approaches work, mine simply ensures a global solution. You can use either one depending on your preference.
Best Regards
