Hi there – when you add custom CSS that then causes a display issue, this troubleshooting method will help you figure out which piece is causing your issue:
– temporarily remove pieces of your custom CSS a few at a time until the problem goes away. When it does, you know the issue is in the last piece of CSS you removed, OR,
– remove all your custom CSS and then add it back in chunks until the problem returns.
Going through this process will allow you to pinpoint where the problematic code lies, so you can fix it.
I noticed that the custom CSS you added has broken the theme’s responsiveness, so your site no longer automatically adjusts to smaller screen sizes. You can see this effect by making the browser screen smaller – your content remains at a fixed size instead of adapting to the browser window size. I’d suggest you use media queries to make sure you preserve responsiveness. You can learn more about them here:
https://en.support.wordpress.com/custom-design/custom-css-media-queries/
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
I’ve tried creating a div
If you decide to modify the theme’s HTML be sure to create a child theme, otherwise your changes will be overwritten every time you update the theme to the latest version.
