[Support request] Responsive CSS for Parallax Sections and Content Padding

[Joe]

Hello,

I was helped out before in this thread https://generatepress.com/forums/topic/parallax-for-logo-and-site-header/#post-261470

The site I’m working on is http://incandenza.net/gilouscafeDEV/

I could do with some help now using media queries to change the size of the background image in the header (which is actually the top Section, using Sections mode).

How would I use CSS to ensure that the header image fits properly on smaller screens, or to specify a different background image? I’d prefer to do the former.

Also, how can I control the padding of the logo (top section content) on different screen sizes? I have tried using media queries and
#generate-section-1 .generate-sections-inside-container {padding-top: 100px; padding-bottom: 100px;}
for example, but it doesn’t seem to work.

Thanks for your time,

Joe

[Tom]

It looks pretty good to me on mobile?: https://www.screencast.com/t/8s78gDCLLQ

What about that would you want changed?

[Joe]

Hi,

I want to have control over it!

In your screenshot example I would not want the image so zoomed in — I would want to show more of the image, not cropped so much. In other words, the image made smaller so that more of it (80–100% of the width) is visible.

Other example screen sizes have different problems, eg:

https://dl.dropboxusercontent.com/u/1745756/screenshots%20for%20web/Gilous%20screen%2001.jpg

There we see the whole width but on scroll the image starts to repeat.

I would appreciate it if you could advise me how to control these things via CSS in GeneratePress.

I don’t need the specific settings for how to make it look a certain way, just how I need to approach it to control these elements responsively.

[Tom]

Gotcha.

So what I would do is give the section a custom class, for example: gilous-header

Then you can use media queries to set different images at different screen sizes:

@media (max-width: 1024px) {
    .gilous-header {
        background-image: url( 'URL TO YOUR TABLET IMAGE' );
    }
}

@media (max-width: 768px) {
    .gilous-header {
        background-image: url( 'URL TO YOUR MOBILE IMAGE' );
    }
}

Let me know if that helps or not 🙂

[Leo]

You could use a different image that’s size correctly for mobile only.

See solution in this post: https://generatepress.com/forums/topic/background-image-sections-on-mobile/

[Leo]

Or what Tom said….

[Author]

Posts