- This topic has 6 replies, 2 voices, and was last updated 7 months, 1 week ago by
Leo.
-
AuthorPosts
-
June 11, 2020 at 3:31 pm #1324277
Matt
I’m at whits end here. I’ve written two posts so far, and the featured images for each are not mobile responsive at all. They look great on desktop, iffy on tablet, and horrible on mobile. They don’t size down at all, so it just cuts the image off.
Example: the featured image on the desktop version is a 500×400 image png, and spells the word alpha. Looks great and is centered with plenty of room around the word. On mobile, though, you can only see part of the letters ‘ph’.
Is this the Mellow theme, or Generatepress, or Elementor? I’ve poked around everywhere and read so many threads, but can’t find anything useful. Please and thank you!
June 11, 2020 at 4:20 pm #1324332Leo
StaffCustomer SupportHi there,
That’s because it’s using a header element/page hero which is displaying the featured image as a background image.
https://docs.generatepress.com/article/header-element-overview/#background-imageBackground images are not responsive by nature (not a theme thing) unfortunately.
We could use a switch out the image for mobile but that would mean you would need a CSS snippet for each blog.
Another method is to display the featured image outside the header element so it can be displayed as a static (responsive) image but there would not be content above it.
Unfortunately there is no perfect solution here.
Let me know which route you would like to go with.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 11, 2020 at 4:36 pm #1324352Matt
Hey Leo,
Would you mind elaborating on this part?
> We could use a switch out the image for mobile but that would mean you would need a CSS snippet for each blog.What would this do? Replace the existing background image with another that could be resized for mobile? I don’t mind adding css snippets to each post, as long as I know this would accomplish what I’m looking for.
My last resort would be the static image / nav bar redo, because that’s going to be a lot of work and creative thinking.
June 11, 2020 at 4:45 pm #1324357Leo
StaffCustomer SupportSo try this for the post you’ve linked:
@media (max-width: 768px) { body.postid-271 .page-hero { background-image: linear-gradient(0deg, rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(https://MOBILE-SPECIFIC-BACKGROUND-IMAGE-URL) } }
Adding CSS: https://docs.generatepress.com/article/adding-css/
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 11, 2020 at 5:01 pm #1324367Matt
Strange enough, that removes the word altogether on mobile version.
I think I’m just going to templatize a psd file with which I can ensure my featured images are small/centered enough to display on all devices.
June 11, 2020 at 5:09 pm #1324378Matt
Thanks, Leo. Until next time.
June 12, 2020 at 10:18 am #1325378Leo
StaffCustomer SupportNo problem 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.