Hi, I"m trying to make a mobile adjustment on the section with the dog and kitten background. named #quote-section. I want to make it so that on screens smaller than 420px wide, that the background is a solid color instead of the photo since it crops poorly.
Site: https://beardnavasota.com/
I added this in the CSS panel:
@media (max-width: 420px) {
#quote-section {
background-image: none !important;
background-color: blue !important;
}
}
What am I doing wrong? Thanks. 
Hi Sarah,
Thank you for writing in, background-image (lower and upper layer) is not directly applied to the section div. They have there own div inside the section. Please update your CSS code to this:
@media (max-width: 420px) {
#quote-section .x-bg-layer-lower-image {
background-image: none !important;
background-color: blue !important;
}
}
The first 1/2 column in that section creates a large empty space on mobile. Please hide the Gap element inside that column on mobile view.
Hope it helps,
Cheers!
Perfect - thank you!
You are most welcome.
If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.
I recommend you to watch following video that will help you to get started with CSS.
Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.
https://developers.google.com/web/tools/chrome-devtools/css/
Thanks.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.