Hiding a section background using CSS

johnnyhungus · May 2018

I am trying to hide the background of a section and I have tried this method but am having no success at all - @media only screen and (max-width: 767px) { .bg-image .column_attr { background-image: none !important; }

Can you please have a peek here http://coursemateapp.co.uk/new-home-2/ as I am sure I have put everything in exactly as you stated yet the section background is still showing on smaller browsers.

Hiding the section completely is not an option BTW

Many thanks

Bryan · May 2018

Hi,

you should target the section, not the column. Since you have added the custom class to the section, taget it only. You have not mentioned which section you mean.

thanks

johnnyhungus · May 2018

This is on the section with the class .handholdingphone

My custom CSS is @media only screen and (max-width: 1030px) { .handholdingphone { background-image: none !important; } }

Or am I missing something here?

Bryan · June 2018

This is because your custom class was inserted with a dot.

http://prntscr.com/jpgu3b

Remove the dot from the custom class field you added.

Do this: handholdingphone instead of this: .handholdingphone

cheers

johnnyhungus · June 2018

I removed the dot and it has made no difference, it is very frustrating as I cannot see what the issue is.

Thanks

Pablo · June 2018

This CSS was fine, just change the dot in custom class inside the section.

@media only screen and (max-width: 1030px) { .handholdingphone { background-image: none !important; } }

johnnyhungus · June 2018

Hi thanks for your response.

I have followed what you have said and checked/double checked but this is not working.

When I shrink the browser, the background of that section is still visible and shows underneath the writing, thus looking awful.

There must be something I am doing wrong or even missing here...

johnnyhungus · June 2018

It's okay, I think I have found the problem, just going to test it through...

Hiding a section background using CSS

Comments