[Support request] Different background image on each page / Container smaller

[Christoph]

Hello GeneratePress support,

I am trying on this page: http://www.uepconsult.com/acerca-de-nosotros/

(1) I have put a background image with

body {
    background-image: url('http://www.uepconsult.com/wp-content/uploads/2018/03/uepnosotros.jpg')
}

BUT what is the optimal size for the image, so thats shown well on all screens? Or how can I make this background responsive?

and
(2) How can I make the container width smaller (just on this page) ?

[Leo]

Hi there,

1. Unfortunately background image aren’t responsive by nature. I think in your case it’s best to set separate image for mobile and tablet using this method: https://docs.generatepress.com/article/responsive-display/

2 This CSS should do:

body .site.grid-container {
    max-width: 1000px;
}

Let me know if this helps 🙂

[Christoph]

Hi Leo,

with this body .grid-container I made it to 800px
BUT also the logo and menu is smaller …

See Homepage:

See About us page:

I just want the content container smaller … and left align with the same padding as the logo …

[Leo]

My bad. Edited the code above.

[Christoph]

Ok, thats work … And now the container left with the same padding as the logo ?

[Leo]

Like remove the padding?

If so try this:

.separate-containers .inside-article {
    padding-left: 0;
}

[Christoph]

I want the container more to the left, align with the logo … May this picture explain, what I want:

[Leo]

try this CSS:

.site.grid-container {
    margin-left: 200px;
}

[Author]

Posts