Hey everyone! I'm currently building my personal voiceover website and I've only been working on it for a couple of weeks. I finished the desktop version of the first page, but I rushed a bit while adapting it for mobile. I'm using Elementor for the development.
On mobile, I'm noticing a problem where the screen isn't adjusting properly. It seems like there's a long black bar on the side when I check it on my phone. I'm wondering what I can do to make it full screen without those awkward overflow issues. Any tips would really help! Thanks!
2 Answers
I’m not an Elementor expert, but this kind of problem is usually fixed with CSS media queries to make items stack at a certain width. Elementor has options for mobile editing, so you should be able to make adjustments there too. Check out their guide on mobile editing: [https://elementor.com/help/mobile-editing/](https://elementor.com/help/mobile-editing/)
The issue is likely due to fixed pixel sizes causing elements to overflow the page. Try using rem or em units instead! You can add this CSS snippet to your stylesheet to help identify overflowing elements:
```
* {
outline: 1px solid red;
}
```
Okay I see this. I read about px vs rem or % usage a few times in the last days. Can I also use % instead of rem then? Should I apply this to every element on the page? Thanks!
Thanks for the link man! I'll check it out asap and update yall!