Hey everyone! I'm currently working on my personal voiceover website and I'm fairly new to web development, having only been at it for a couple of weeks. I've managed to finish the first page for desktop pretty quickly, but I'm struggling with the mobile version. I'm using Elementor for development.
The issue is that when I view the site on mobile, there's a long black bar on the side, which seems like it's due to some elements not fitting properly on the screen. How can I adjust my site to ensure it displays correctly in full screen on mobile devices? I appreciate any help! Thanks a bunch, webdevs!
2 Answers
I'm not too experienced with Elementor, but generally, these issues can be solved with CSS media queries. They allow you to stack elements when the screen width is below a certain size. I found a tutorial that should help you with mobile editing in Elementor: [Elementor Mobile Editing](https://elementor.com/help/mobile-editing/). Give it a look!
It looks like you might have some elements that are wider than the screen because you’re using fixed sizes in pixels. Try switching to relative units like rem or em. This way, elements can adjust based on the screen size. You can also add this CSS rule to your stylesheet to visualize what's overflowing:
```
* {
outline: 1px solid red;
}
``` This will help you identify the elements that are causing the overflow. Let me know if that helps!
Related Questions
Cloudflare Origin SSL Certificate Setup Guide
How To Effectively Monetize A Site With Ads