- This topic has 9 replies, 3 voices, and was last updated 3 years, 11 months ago by David.
-
AuthorPosts
-
September 19, 2019 at 11:56 pm #1014168Eric
Hey GP Team, I was wondering if you could offer me a CSS solution to automatically style and resize the featured images?
At the moment I have several images and all of them are different sizes. I would like to automatically display each image to fill out the entire content width and to crop whatever doesn’t fit in a given height. Is that possible?
No matter what I place in the customizer, the featured image always stays the same size. I would like to set the CSS so that every image is auto stretched or cropped to fit the whole space before the title.
Thanks so much for your time and more power to GENERATEPRESS!!!
September 20, 2019 at 2:07 am #1014232DavidStaffCustomer SupportHi there,
is this just for the Featured Image on your single Posts ? Or is this for every image in the post?
September 20, 2019 at 11:43 am #1014745EricHey David! Thanks for replying… Yes, this is ONLY for page and post featured images. The other images should just be treated as normal.
September 20, 2019 at 1:33 pm #1014805DavidStaffCustomer SupportSo try this CSS:
.post-image-above-header .inside-article .featured-image img { width: 100%; height: 300px; -o-object-fit: cover; object-fit: cover; }
You can adjust the height property to suit. If you just want them to fit 100% wide and leave the height as is then remove all the properties apart from the width: 100%;
September 21, 2019 at 8:47 am #1015309EricThank you, David! This worked great… Is there anyway I can make it display the image smaller JUST on mobile? Like maybe shrink it to only occupy the top third of my phone screen? At the moment it keeps the 300px height for both, and it takes a lot of space up when viewed on my phone.
September 21, 2019 at 8:49 am #1015313DavidStaffCustomer SupportYou can create another CSS rule specifically mobile like so:
@media (max-width: 768px) { .post-image-above-header .inside-article .featured-image img { height: 200px; } }
September 21, 2019 at 9:15 am #1015338EricFantastic! Thanks again for your help, David. Worked like a charm!
September 21, 2019 at 9:16 am #1015340DavidStaffCustomer SupportGlad to be of help
May 28, 2020 at 4:15 am #1304766MarcelHi David,
I’m very surprised and impressed by GeneratePress! After 5 years of TagDIV Newspaper this is really much smarter. I can find most of my answers already in docs and forum.
In this case I wanted the same effect, however I’m using a ‘Single Post’ Element and in there I’ve chosen for the Featured Image as background.
Above CSS doesn’t work for that, is it somehow possible to achieve the same?
Kind regards and thanks,
Marcel
May 28, 2020 at 5:33 am #1304850DavidStaffCustomer SupportHi Marcel,
glad to hear your enjoying the Theme.
Could you raise a new topic where you can use the Site URL Field to share your site privately and we can take a look 🙂 -
AuthorPosts
- You must be logged in to reply to this topic.