Lodestar: how to prevent theme 'zooming in' on images
-
Hi
I have a page with a featured image as Panel 1 of the home page (just below the header image). When I set the featured image (I’ve tried a few different sizes), and then view the home page, it has zoomed/cropped so much that the icons in the centre of the ‘background’ image seem to overspill the viewed area.
The recommended image size for featured images is min 2000×1200 for this theme. I have tried using slightly bigger images, but it doesn’t seem to prevent the zooming/cropping.
My mock-up website is at https://pixelperfectdesign51614475.wordpress.com
Can anyone help with this, please? Many thanks.
The blog I need help with is: (visible only to logged in users)
-
I have found out how to compensate for the problem, by reducing the height of the image (but maintaining the 2000px width), and by moving my icons slightly lower down than vertically centred, since the top of the image seems to be being cropped off.
-
Update – unfortunately, the image is not similarly cropped in mobile view, which means I have a clutch of icons tightly grouped in the centre of the image, which are now too small to read in mobile view.
Does anyone know how to prevent this cropping in desktop view?
-
Hi @ukpoliticos, with the way this theme works on images, having text-based images within one of the panel featured images is problematic. The actual image I see at mobile widths is virtually the same crop as I’m seeing from 960px all the way down to phone size. Above about 960px, the image is actually made bigger by the theme and less image to the left and right of the text/icon blocks is visible.
I tried to see what I could do with custom CSS to adjust things, but it is quite tricky to do, and even if the image is adjusted to be wider in mobile, the text is still small and hard to read, and that would require either the WordPress.com Premium or Business plan. If the blocks were each a separate div that overlaid the image, then at somewhere around 768px or a bit narrower, the blocks could be changed to two columns with three rows so that they could be bigger on smaller screens, but there really isn’t a way I can see to do that.
Lodestar featured images are really designed for photographic images, and when you place text/graphics in them, the result is typically less than optimal.
-
Hello
Thank you so much for your very timely and helpful response. I couldn’t see a way to overlay a featured image with divs either.
I do have a wordpress.org version, which will be the live version (there is no support for Lodestar over at .org), so I could use CSS to adjust things, but I am not sure how to go about it. Do you have any ideas how to go about that?
I do understand that featured images aren’t really designed to be overlaid with text/graphics, but my early feedback from my site was that the large featured image directly beneath the header image was a bit of a waste of space, so I would like to try to make better use of it.
Many thanks for your kind help.
-
If you are going self-hosted with your site, there are more options for you. You can post in the WordPress.org forums and tag your post with wpcom-theme and someone will help you out with your self-hosted site using Lodestar.
-
- The topic ‘Lodestar: how to prevent theme 'zooming in' on images’ is closed to new replies.
WordPress.com Forums 