[Resolved] Footer widget background image size issue

Home Forums Support [Resolved] Footer widget background image size issue

Home Forums Support Footer widget background image size issue

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #591857
    Alice

    I have hard time adjust background image size for footer widget so that it can show on both laptop and phone nicely. If I don’t set it to ‘Repeat’, then it leaves a blank area on the right; if I set it to ‘Repeat’, the image repeats itself unnaturally with a clear cut border.

    I also tried the Size(Auto) and Attachment options to no avail. Please advise.

    GP Premium 1.6.2
    #591888
    Leo
    Staff
    Customer Support

    Hi there,

    Background images are tricky to deal with as they aren’t responsive by nature (it’s not a theme thing).

    In this case the main problem is that your background image isn’t large enough for the full container width.
    I would recommend uploading an image for desktop, something around 1920px in width and 400px in height.

    Then we can have another look to see what we can do for mobile.

    Let me know if this helps ๐Ÿ™‚

    #591912
    Alice

    I changed the resolution to 1920 width, and now the laptop version works. Thank you.

    The mobile version is fine too as far as the widget goes. But I have a footer font question. It seems there is only one font size for all: laptop, tablet, phone all sharing the same footer font size. In my case I have a menu in the footer, and a Copyright message. I’d like to use smaller font size for mobile version than the laptop. Any way to customize them differently?

    #591925
    Leo
    Staff
    Customer Support

    We would need to use a bit CSS to set the mobile font size:

    @media (max-width: 768px) {
        .site-info {
            font-size: 10px;
        }
        .footer-bar .widget_nav_menu li {
            margin: 0 7px;
        }
        .footer-bar {
            margin-bottom: 10px;
        }
    }

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

    #591944
    Alice

    If so, can I also have the mobile CSS to

    1. reduce the distance between footer menu items (the gaps are a bit big)
    2. reduce the vertical gap between footer menu items and the Copyright line (the footer menu is above the Copyright line on mobile)

    #592004
    Leo
    Staff
    Customer Support
    #592729
    Alice

    Confirmed it is working. Thank you.

    #592736
    Leo
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.