Black Friday! Get up to 25% off GP Premium! Learn more ➝

Reply To: Image setting for Mobile/Responsive

Home Forums Support Image setting for Mobile/Responsive Reply To: Image setting for Mobile/Responsive

Home Forums Support Image setting for Mobile/Responsive Reply To: Image setting for Mobile/Responsive

#240775
Michael Loguidice

Hi Tom, thanks for all your help thus far. I created custom image sizes for mobile, tablet and full screen but I can’t get them to cooperate!

I’ve been using the css for mobile, full screen and tablet that you gave me, but the header padding seems to be the key issue somehow.

I’ve used a smaller image for the mobile 768×517, so that it’s in line with the CSS you gave me:

@media (max-width: 768px) {
    .site-header {
        background-image: url(http://www.yporganics.com/wp-content/uploads/2016/11/homepage-image-bottom-768x517.png);
    }
}

also, I’m using the full screen image 1280×861 size, and the CSS is:

@media (min-width: 1025px) {
  .site-header {
        background-image: url(http://www.yporganics.com/wp-content/uploads/2016/11/homepage-image-center-1280x720.png);
    }

}

When I used the two together the mobile seems fine, however the padding settings determine how much I can see on the Full screen. I have it set to about 130 on the bottom padding and that’s good for rendering the full image on mobile, BUT, I can’t see much of the full screen image at all. If I adjust the bottom padding to about 360-400, I can see the full image on the full screen but then the mobile image is cropped.

But then once I add the code for the TABLET, it seems to affect the mobile settings and the image jumps up to overlap with the site tagline. Here’s the tablet CSS

@media (max-width: 1024px) {
  .site-header {
        background-image: url(http://www.yporganics.com/wp-content/uploads/2016/11/homepage-image-1024x768.png);
    }

}

Here’s everything I used together in the simple CSS:

@media (max-width: 768px) {
    .site-header {
        background-image: url(http://www.yporganics.com/wp-content/uploads/2016/11/homepage-image-bottom-768x517.png);
    }
}

@media (min-width: 1025px) {
  .site-header {
        background-image: url(http://www.yporganics.com/wp-content/uploads/2016/11/homepage-image-center-1280x861.png);
    }

}
@media (max-width: 1024px) {
  .site-header {
        background-image: url(http://www.yporganics.com/wp-content/uploads/2016/11/homepage-image-1024x768.png);
    }

}

I’m also wondering if there’s a custom way to set the padding for each view, like the code you gave me for mobile, full screen and tablet.

Can you please take a look?
Thank you so much!
Michael