Hi Teresa,
Thank you for reaching out and thanks for using Crio Pro WordPress theme!
The overlay in your theme is directly tied to the Inspirations template you set up when you first launched your website. In order to remove it you need to use a bit of custom CSS. Just navigate from your WordPress dashboard to Appearance < Customize < CSS/JS Editor and add this snippet:
body.home.inspirations-theme-73:after,
body.home.inspirations-theme-73:before {
content: none;
}
That should resolve the issue of the overlay in the “Hero” section of your homepage. As far as your website’s mobile responsiveness I always suggest developing with a mobile first design approach. That way you’re building your site for mobile screen sizes as a priority, then scaling those elements up to fit larger sizes.
BoldGrid Post and Page Builder uses responsive utilities to help you develop for different screen sizes. Start with the smallest screen size and when you’re satisfied with your block layout for that screen size continue to scale up using the responsive utilities to adjust for larger sizes as you go.
It may seem like a lot of work at first but it will definitely save you time and headache in the long run.
I hope this helps. Please reach back out if you have any other questions for us.