Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #30622
    courtheye
    Guest

    I want to scale and center background image for mobile and tablet view.

    Also would possibly want to make the space smaller to just fit the buttons and change background to a solid color for tablet and mobile if the photo still does not look right.

    Using boldgrid theme hydra.

    #30624
    Jesse Owens
    Guest

    Hello,

    Thanks for the excellent question, I’m sorry the background image isn’t working the way you need it to.

     I tested the site you mentioned in your WordPress.org post and it looks like the issue was related to the theme overriding your custom CSS. Here’s the code I found to work:

    @media (max-width: 991px) {
    body.custom-background {
        background-size: 100vw !important;
            background-position: center !important;
        }
    }

    That will make it look like this across different view widths:

    website viewed across multiple screen sizes

    As for reducing the size of the area so that it’s only high enough for the buttons, it actually looks like your call-to-action widget has a stray paragraph above the buttons, containing only a single period ( . ) character. If you edit your call-to-action widget and switch from the visual editor to the code editor, look for the tag that looks like this:

    <p style="margin-bottom: 80px;">.</p>

    Deleting that paragraph will make it look like this:

    mobile website design without extra paragraph

    If you do decide to go with a solid color for smaller screens, just make sure to add the

    !important

    tag to any CSS rule you use, so that it doesn’t get overridden by the theme.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The topic ‘My background is not positioned correctly in mobile view’ is closed to new replies.