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

#241009
Michael Loguidice

Hi Tom,

This is helpful, getting closer now… I can feel it! Full screen and mobile are good.

However, I’m getting no image for tablet when in the vertical position (on an actual tablet IPAD Mini). In the horizontal position the image is there, but I’m not getting much of the image – even with the bottom padding set to 350 or more. This also reduces the quality of the image I can tell.

Maybe I need a specific image size with specific CSS for this view, what do you think?

I have images sizes of 1280×860 fullscreen, 1024×689 tablet and 768×517 mobile.

Here’s the code I was using:


@media
(min-width: 1025px) {
.site-header {
background-image: url(http://www.yporganics.com/wp-content/uploads/2016/11/homepage-image-center-1280×861.png);
}
.inside-header {
padding-top: 0px;
padding-bottom: 350px;
}

}


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

}


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

If there’s anything you can help with I’d really appreciate it!
Thanks,
Michael