-
Posts
-
Hello! I’m hoping to get some help with featured images.
I have uploaded them at 1200×630 for social sharing.
In the individual blog posts they are displaying fine.
However, where I have used a blog post list (boldgrid block component) they show up in full on a desktop and mobile view, but for a tablet (or narrower than my desktop) they are too narrow which is cutting off some of the text in the image – is there a setting to resolve this?
Hello Kat-
By default on Desktop and Tablet sizes, the image will cut off the top and bottom of the image to fit it with 100% width and 200 pixels in height. One way to make sure that your text always shows up in these previews is to make sure the text is within the middle 200 pixels of the image height.
If you don’t want to redesign your images, here’s what you can do. View the page with your blog posts list, and click Customize, then navigate to Advanced > Custom JS & CSS.
If you need to see the entire image, regardless of the device, try CSS code like this:
.bgc-single-image { height: 315px; background-size: contain; }This will set the height to half of the full size of your image (630 pixels) and scale the image to fit inside the container.
Thanks – I’ve tried that out and it worked to fix the tablet issue, but I didn’t like how it impacted the view on a mobile.
I’m going to try and adapt the images and see how that looks.
- The topic ‘Images being cut off in tablet view’ is closed to new replies.
