Hide a color box background image on smartphone

Hey cagraphicdesign!

The background images are applied as inline style to color section. inline styles have the highest specificity and cannot be altered using custom CSS.

If you like to make alterations or modify the image in mobile screens you need to remove the background image from color section and apply it using custom CSS.

Add an ID to the color section and use the below css to remove background image in portable devices

#bgimage{ 
	background: #000 url(image.jpg);
	background-size: cover;
	background-position:center center;        
}
/* Home page section images on mobile */
@media only screen and (max-width: 767px) {
#bgimage{ 
	background: #000!important;
}
}

Regards,
Vinay Kashyap

Hi!

Don’t worry at all enfold is so easy to use you will get around these options in no time :)

Drag and drop a color section then click on it to see the below screen and add you ID in the ID section

in this line ” background: #000 url(image.jpg); ” only replace image.jpg with the image path example if your image is on path http://kriesi.at/wp-content/themes/kriesi/images/logo.png

The code for it will be

” background: #000 url(http://kriesi.at/wp-content/themes/kriesi/images/logo.png); ”

Regards,
Vinay Kashyap

Hey!

That’s great! yay… you just need to add class name or ID any one of them. Let’s go for class name.

If you think it would be easy if i set it up for you and then you can have a look at the setup and make any changes you need please create a temporary user with ‘administrator’ role and share in private content with permission to deactivate all plugins and add custom code if necessary to help you resolve this issue.

just to make sure we on the same page the image highlighted in green in screenshot below need to scale down in mobile version right?

Best regards,
Vinay Kashyap

Hi!

We are working on your ticket please wait while we update the results here soon.

Please check the homepage now

We added the below CSS to quick CSS and class name “custom-bg-1” to the color section and removed the background image from the color section.

/* Color Section Bg Image*/
.custom-bg-1 {
background: #FFF url(https://www.potentialmatters.com/wp-content/uploads/2016/01/123rf-28387068-2560x933-smaller.jpg);   
background-size: cover;     
background-position:bottom right; 
}
@media only screen and (max-width: 767px) {
  .custom-bg-1 {
background: #FFF !important;   
background-size: cover;     
background-position:center center; 
} 
}

Your text looks pretty close to the image instead of using different lines by hitting the Enter key which create a new <p> tag use one single line with <br> where ever you need a line break and adjust the line height and letter spacing using CSS.

Cheers!
Vinay Kashyap

• This reply was modified 8 years, 9 months ago by Vinay.