Hide background image on mobile

Uniquewc · November 2014

How do I hide the background images in the different sections? They look terrible on mobile.

Albert · November 2014

This can be done only within css. Each section must have own ID and only then you can type css that will hide background images on mobile.

Uniquewc · November 2014

Can you give me instructions and show me an example code that I can use and customize please? Thanks.

Albert · November 2014

If you will create sections with background images and ID's for each section and will send us url to website where you did it then we can show you example.

Uniquewc · November 2014

That sounds more complicated than it should be. Please create a "disable background image on mobile" button for sections in future versions of be.

I've seen quite a few people ask for it. Last time we asked, you deleted our forum account.

We will just disable those sections on mobile entirely.

Albert · November 2014

We'll think about it but at this moment we got tons of other requests in queue and we can't promise that this will be ready soon.

BTW This is not complicated at all. But if "setup ID for section" is too difiicult for you then we have no idea how we can help you at this moment. We just asked about ID for section. We did not asked about anything impossible or difficult. When you edit section (what has been explained at http://themes.muffingroup.com/betheme/documentation/#section) you should type just Custom ID ( Custom CSS will be fine as well), like for example section-without-background-on-mobile and that's it.

Uniquewc · November 2014

I can CSS and I can add an ID to each section, thats fine. There are so many changes to the site regularly that it doesn't make sense to continue contacting you every time we need to make a change.

It would be easier if you could just give me an example of the code.

Here is the link:

http://formoli.angelosign.com/

There are teal and salmon sections. We just want to hide the background image on mobile and leave the color.

I've named the first section "healthyGums"

nightwhispers · November 2014

This would be a great feature, can't wait for the solution

Albert · November 2014

@Uniquewc As we see you created one section with "healthyGums" ID. So to remove background image for this section on mobile, please use below css:

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

@nightwhispers As we wrote, we'll think about it. At this moment it is possible with custom css only as we described above.

nightwhispers · November 2014

Thank you for the reply @muffingroup

I have tried the same fix on my website but doesn't seem to be working

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

tried to add this in the betheme custom css and also in the custom css of the page

cleaningacademy.ro

If you have the time please have a look

Regards

Albert · November 2014

This does not work because you setup ID name for section but in css you used code for CLASS. If you setup ID, then css should be as below:

@media only screen and (max-width: 479px) { #acasa-bg { background-image: none !important; } }

Remember that "." is responsible for class but "#" for ID.

sybez · June 2017

Hi,

I'm trying to hide the background-image of a section using the following code:

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

}

But it's not working.

This site is in under construction mode so I can't really link the page, but its a column within a Wrap, within a Divider in the Muffin Builder. Here's the section of code below with the URL I'm trying to hide, any help?

<h3><a style="color: #595959;" href="/about">ABOUT US</a></h3>

<p style="color: #595959;">Find out more about why I started PD Motor Services and how I like to look after my customers</p>

</div>

</div></div>

Bryan · June 2017

Hi,
your css seems to be correct, without inspecting the website I cannot relly say much.
Are you pasting this css into theme options>custom css&js>css?
Try to delete browser cache.

sybez · June 2017

Hi,

I'm still struggling with this, can I provide access to view the site to someone and they take a look please?

Thanks

Bryan · June 2017

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

You said you want to remove a background section image, well then maybe edit the page and edit the section where you will find the background image set. All of this can be done in the muffin builder.

sybez · June 2017

Thanks for the reply, but I think you missed my issue.

The image url is located "inline" of the background element css. Giving it a custom class if not targeting the image specifically.

The red bit of code below -

The image is added to the column element background within the Muffin builder. It's overlapping the text when on mobile view. All I want to do is hide this on mobile and show on desktop, it can't be this difficult surely

Bryan · June 2017

You can just simply hide the whole section on mobile, when you edit each section there is an option to hide/show it on various screen sizes.

Hide background image on mobile

Comments