How do I change the blog featured image size in Kalles Theme 4.2

Store Design

Topic summary

A user needed to reduce the oversized featured image on their blog pages in Kalles Theme 4.2, which was obscuring content visibility.

Solution provided:

  • Custom CSS code added via Customize > Theme settings > Custom CSS
  • Initial fix limited featured image width to 40% on desktop screens using .t4s-article-image.t4s-pr selector

Additional requests resolved:

  • Extended the width limit to all article images by adding .t4s-article-content.t4s-rte img to the CSS
  • Set page heading height to fixed 606px using flexbox alignment
  • Limited image slider height to 606px specifically for blog posts using .template-article .t4s-sec-slideshow selector

Status: Issue fully resolved. All CSS solutions targeted desktop screens only (min-width: 1025px) and used !important flags to override theme defaults.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hey there! I’m trying to adjust the featured image size on my website’s blog pages but can’t seem to find where to do that in the code. I’m using the Kalles theme. The featured image is too large and viewer can barely see the content, so I want it smaller.

2

Hi @RegenTech . Welcome to the Shopify Community!

Please, share the store URL (and the password, if applicable). Would be much easier to debug and solve.

3

Hi @RegenTech ,

Please send the website link, I will check it for you

1 Like
4

Hi, this is the link: https://www.regentech-fashion.com
and the blog url: https://www.regentech-fashion.com/blogs/inspire-me/lyocell-fabric-guide-2025

5

Oh, thanks, this is my link: https://www.regentech-fashion.com/blogs/inspire-me/lyocell-fabric-guide-2025
But how do I share my password with ya, by DMing?

6

Hi @RegenTech ,

Please go to Customize > Theme settings > Custom CSS > Add code:

@media (min-width: 1025px) {
.t4s-article-image.t4s-pr {
    max-width: 40% !important;
}
}
1 Like
7

OMG, it works! Thank you so much for your help, but what if I want to adjust all the images of the artice the same height limit.

8

Hi @RegenTech ,

Please change code:

@media (min-width: 1025px) {
.t4s-article-image.t4s-pr,
.t4s-article-content.t4s-rte img {
    max-width: 40% !important;
}
}
1 Like
9

It’s helpful, thank you so much for your help. Also, I’d like to set the fixed height of top page heading size to 606px, can you help me with that?

10

Hi @RegenTech ,

Please add code:

@media (min-width: 1025px) {
.template-article .header-banner .page-head {
    height: 606px;
    display: flex;
    align-items: center;
}
}
1 Like
11

Thank you so much, now i’m using different blog post template, and I want to limit the image slider (parent) height to 606px, only for the blog post, not for the other page. still the same url: https://www.regentech-fashion.com/blogs/inspire-me/lyocell-fabric-guide-2025

12

Hi @RegenTech ,

Please add code:

@media (min-width: 1025px) {
.template-article .t4s-sec-slideshow .t4s-slideshow-inner:before {
    padding: 0;
    height: 606px;
}
}
1 Like
13

It’s super helpful. Thank you so much!

14

Hi @RegenTech ,

You’re welcome and happy to guide you :blush: