[Support request] a different background image for mobile cell

[John]

hello, Im building a new site for my business…http://johnr75.sg-host.com/ this is stage site before i make it live to replace my old site

the background image that I’m using for laptop (of the van) isn’t shrinking down that well in the mobile cell version it cuts it off.. what can i do to fix this? can use other image just for mobile? can i fix what’s there? what are the steps i need to do to get this taking care of… most of customers are on mobile cells phone so i want it to be presentable. Please thanks

[Leo]

Hi there,

Unfortunately background images aren’t responsive by nature so definitely tricky to deal with sometimes.

You can use this CSS to switchout the image on mobile screen:

@media (max-width: 768px) {
    .gb-container.gb-container-6988789f:before {
        background-image: url(http://MOBILE-URL-HERE);
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps 🙂

[John]

Thank you! That help a whole lot.:)

One more Question for ya? can I change just the height of the header somehow? this is for the mobile cell version. thank you 🙂

[Leo]

So reduce this part here?
https://www.screencast.com/t/87M8tu1xL

If so you try reducing the top and bottom mobile padding on the container:
https://www.screencast.com/t/vmRnRh18w

Let me know if this helps 🙂

[John]

yes it did thank you Leo: I’m new to this theme i switch over from Divi just due to speed so i’m learning all the aspects of this generatepress theme plus rebuilding the site 🙂 but i love it! thanks again

[Leo]

No problem 🙂

[Patrick]

Hi, please let me understand. Why isn’t there a possibility within GeneratePress to provide a different background image url for a container for desktop, tablet and mobile in the same way I can provice different paddings, margins, borders, etc.? If it can be realized by this custom css, it can be built by GeneratePress, right? My customer is also asking for this and it happens lots of times that background images (for example for a header) don’t fit on mobile.

[Elvin]

Hi Patrick,

This topic was posted a year ago. Assuming we’re on the same context of this topic, there have been changes w/ GenerateBlocks since then.

GenerateBlocks’s Pro version can now set different background images per viewport as shown here – https://share.getcloudapp.com/YEuP0A92

Header(page hero) Element lacks this feature but you can now create Block Element – Page hero so you may have to use Block element over Header element.

[Patrick]

Hi Elvin, thanks for following up this fast! I know it was posted a year ago, but I had the same question 🙂

It seems I’ve missed the ‘Advanced’ configuration button as I expected this to work without using the ‘Advanced’ option. I think this would be better, because it’s faster to configure and all configuration options are already in place, and other options also work this way:

If I change the image URL here per viewport, it’s also changing for other viewports. It works different from other basic configurations like margin, padding, border, border-radius, etc.

Your suggestion works great as well, but to me it’s not logical it works this way: this is such a basic thing…

[David]

Hi there,

thanks for the feedback.
The standard responsive tabs have their limitations, they are fine if the values are fairly simple and repeatable. That is if you have x, y, z fields containing a value then they can be easily swapped for each device size. But when an option is say a toggle to switch something or or off or set a value to say element or pseudo element it becomes real problematic.

Advanced Backgrounds resolves the related issues and adds a lot more options.
eg. combining breakpoints such as Tablet + Mobile, selecting different attachment sizes, adding a background on hover etc. It also gives us the framework to build on – such as video backgrounds or custom breakpoints.

[Author]

Posts