Hey everyone! I'm currently building my own personal voiceover website and I'm still a total newbie to web development—I've only been at it for a couple of weeks. I just wrapped up the desktop version of my site, but I'm having a bit of a rough time making the mobile version work right. When I check it on my phone, I notice there's some annoying overflow issue, like I can scroll sideways and see a long black bar. I'm using Elementor to build the site. How can I adjust it to make it fully responsive? Thanks a ton for your help, web developers!
2 Answers
I'm not an Elementor expert, but issues like this are usually fixed using CSS media queries. They allow you to change the layout based on the screen size—like stacking items instead of showing them side by side when viewed on a small screen. I believe Elementor has options for that, too. Check out this link: [https://elementor.com/help/mobile-editing/](https://elementor.com/help/mobile-editing/)
It sounds like you might have some elements that's causing overflow because of fixed sizes set in pixels (px). Try switching your font sizes and spacing to use rems or ems instead. If you want to identify which elements are leaking out of the viewport, add this CSS to your stylesheet:
```
* {
outline: 1px solid red;
}
```
This will highlight the elements for you!
Got it, I’ve seen some info about px vs rem and % recently. Can I mix up % with rem too? Should I do this for everything on the page?
Thanks for the link! I’ll take a look and update you all soon!