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

[Leo]

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;
    }
}

[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.

[Leo]

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

Any caching plugins?

[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?

[Tom]

Hmm what could cause that…

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

[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?

[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.

[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.

[Tomasz]

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

[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;
    }
}

[Leo]

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

You can try removing it to see what it does.

[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?

[Leo]

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.

[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.

[Leo]

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;?

[Author]

Posts