[Support request] a different background image for mobile cell

Home Forums Support [Support request] a different background image for mobile cell

Home Forums Support a different background image for mobile cell

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1583437
    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

    #1583619
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #1587472
    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 πŸ™‚

    #1587496
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #1587509
    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

    #1587568
    Leo
    Staff
    Customer Support
    #2033587
    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.

    #2034812
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #2035261
    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:

    Background image per viewport

    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…

    #2035932
    David
    Staff
    Customer Support

    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.

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.