- This topic has 20 replies, 4 voices, and was last updated 5 years, 4 months ago by
Leo.
-
AuthorPosts
-
October 27, 2016 at 1:11 am #239274
Michael Loguidice
Hi there,
Actually I have 2 related things here.. 1)I’m just wondering if I can make my header background image responsive for mobile, so that it shows the full image?
It’s not a particularly big problem for me since the image I use is fairly suitable even if it’s cut off, HOWEVER in the mobile view my site tagline is overlapping the image and makes it hard to see.
2) Can you think of anything to do for mobile viewing where my tagline won’t overlap the image?
This is just a test image for now… here’s the link: http://www.yporganics.com
Thank you!
MichaelOctober 27, 2016 at 1:16 am #239279Michael Loguidice
Also, I have reduced the top header padding to zero to create more space at the top for the tagline.
October 27, 2016 at 9:52 am #239400Tom
Lead DeveloperLead DeveloperBackground images are all about aspect ratio when it comes to being responsive.
One thing you could do is set a different image specific to mobile:
@media (max-width: 768px) { .site-header { background-image: url( 'MOBILE SPECIFIC IMAGE URL' ); } }
Hope this helps π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentOctober 28, 2016 at 12:22 am #239555Michael Loguidice
Hi Tom, that looks great.
Could you tell me the css for full screen and tablet too?
Thanks so much!
MichaelOctober 28, 2016 at 12:46 am #239569Tom
Lead DeveloperLead DeveloperFull screen:
@media (min-width: 1025px) { }
Tablet:
@media (max-width: 1024px) { }
Hope this helps π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentOctober 28, 2016 at 1:28 am #239579Michael Loguidice
Thanks Tom!
How should I control the height for the image?
I was using the padding settings, but not sure if that would work with this new CSS?
Michael
October 28, 2016 at 9:12 am #239646Tom
Lead DeveloperLead DeveloperThe height of a background image is dictated by the content inside the area. So you can control it with padding and the height of your content π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentNovember 1, 2016 at 7:17 am #240775Michael 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!
MichaelNovember 1, 2016 at 10:17 am #240823Tom
Lead DeveloperLead DeveloperHi Michael,
You can set padding as well quite easily:
.inside-header { padding-top: 20px; padding-bottom: 20px; }
So you can adjust that at different sizes.
For the other issue, try adding the max-width: 768px to the very bottom, so the CSS shows up in order (Desktop, Tablet, Mobile).
There shouldn’t be any conflicting of images.
Let me know π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentNovember 2, 2016 at 2:46 am #241009Michael 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,
MichaelNovember 2, 2016 at 7:42 pm #241230Tom
Lead DeveloperLead DeveloperIt’s there, the issue is the top of your image is white, and your header isn’t tall enough to start showing the vegetables under the white.
If you chop off some of that top white area, it should work better.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentNovember 3, 2016 at 10:29 am #241426Michael Loguidice
Hi Tom, I tried cropping the extra white space and I created new images where there’s no white space on top – nothing’s working??
I see a difference on the horizontal view of the tablet, but nothing responds at all for the vertical view. Even making adjustments with the padding, the vertical view doesn’t move the text in the body and no image at all in the header background.
Is it possible the CSS I’m using isn’t covering the vertical view for tablet (786×1024)??
Also, I notice that the image for the horizontal view on tablet size, isn’t centered – it’s only capturing the left side of the image – why would that be? Is there a responsive setting for tablets?
Thanks,
MichaelNovember 3, 2016 at 12:14 pm #241463Tom
Lead DeveloperLead DeveloperYou can see what’s happening here: http://screencast.com/t/TfXp9fgcz5Oi
When you get down to that vertical tablet/mobile size, there’s still lots of space on top of the image.
It’s not resizing because you have the “Attachment” set to “Fixed”.
You can center it by typing this into the “Position” field:
center center
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentNovember 4, 2016 at 8:15 am #241674Michael Loguidice
Hi Tom,
Thanks for spelling it out for me! It turns out I was working on the wrong image, I didn’t realize that the image for vertical tablet and mobile are the same. I had been working on the image for the horizontal tablet…oops!
I can’t seem to figure out how to get rid of the white space for the vertical tablet – it looks fine for the mobile view, but if i completely cut off the top of the image it overlaps the site title and tagline. That’s why I left white space to begin with.
I’m thinking there is an ideal image size for header backgrounds that would cover the two nicely. I’m using a 360×640 but that doesn’t work for the vertical tablet, unless I really crank the bottom padding. Do you have any ideas for the right image sizes?
Again, thanks for everything!
MichaelNovember 4, 2016 at 10:52 am #241737Tom
Lead DeveloperLead DeveloperI think in a case like this, you might be better off merging the site title and tagline with the background using a program like Photoshop or Gimp, then uploading the image as a header in “Customize > Site Identity”.
This would make it so it would be uniform at all screen sizes.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.