[Resolved] Header positioning, padding, breakpoints, grid headings

Home Forums Support [Resolved] Header positioning, padding, breakpoints, grid headings

Home Forums Support Header positioning, padding, breakpoints, grid headings

Viewing 15 posts - 16 through 30 (of 48 total)
  • Author
    Posts
  • #578103
    Leo
    Staff
    Customer Support

    It’s not working because you are using background-size: center center; which isn’t a valid statement.

    Can you try background-position: center center; like the suggestion above?

    So the overall mobile CSS should be:

    @media (max-width: 768px) {
        body {
            background-image: url(http://innovationtitans.com/wp-content/uploads/2018/05/IMG_BG1_small.jpg);
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: center center;
            background-size: inherit;
        }
    }
    #581886
    Tomasz

    Just changed into what you have recommended. Now there is no image displayed on mobile at all.
    I am looking for bugs but can’t find any.

    #581940
    Leo
    Staff
    Customer Support

    That’s weird. It’s working well on browser resizing.

    Any caching plugins?

    #582061
    Tomasz

    Yes, I know… Just checked this on another mobile device. Also, tried clearing cache – it didn’t help. And yes, I’m aware it works perfectly fine when resizing a browser!

    Regarding caching plugins – so far I didn’t use any. Should I?

    #582209
    Tom
    Lead Developer
    Lead Developer

    Hmm what could cause that…

    Can you try removing the overlay color added by the Page Header?

    #582388
    Tomasz

    Perhaps inheriting doesn’t work. I read that parent size property should be declared before applying it to the child element (can’t just be default). I wonder what is a parent of background in this case?

    #582561
    Tomasz

    Tom, just tried that. It didn’t help.
    I will copy the page and build mobile css from scratch and see where that leads.

    #582592
    Tomasz

    Just checked. The background color of the home page is set in personalization/colors/content.
    I added: “background: transparent;” just before loading an image. It clears the background nicely and resizing browser once again works very well… but still no image on a mobile device. It looks like for some reason it’s not being loaded.

    #582629
    Tomasz

    Hmm, I have uncovered a pattern. As I remove some divs an image starts to gradually appear from the bottom. Deleting

    #582722
    Tomasz

    Can someone explain what does this piece of code I was supposed to add do:

    @media (min-width:769px) {
        .generate-inside-combined-content.page-header-content-container {
            margin-top: auto;
        }
    }
    #582754
    Leo
    Staff
    Customer Support

    That’s placing the text at the bottom of the page as you requested.

    You can try removing it to see what it does.

    #582765
    Tomasz

    Yes, that much I know 🙂 I wanted to understand the syntax a bit better.
    Also, does it have to be put within a media query or can just have it above page media queries?

    #582767
    Leo
    Staff
    Customer Support

    It doesn’t have to wrap in media query – if you want the text to show up at the bottom on mobile too then you can remove it.

    #582804
    Tomasz

    By deleting background-attachment: fixed;I discovered that in fact an image is pushed down. It also seems to be centered vertically to the whole page instead of the top browser window.

    #582810
    Leo
    Staff
    Customer Support

    Now that’s because background-position line below is setting it this way.

    @media screen and (max-width: 768px)
    body {
        background-image: url(http://innovationtitans.com/wp-content/uploads/2018/05/IMG_BG1_small.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: inherit;
    }

    Maybe it should be background-position: top center;?

Viewing 15 posts - 16 through 30 (of 48 total)
  • You must be logged in to reply to this topic.