Local theme blog posts are too big

[Mercury363]

The images of my Local theme blog are far too big - https://incarsafetycentre.co.uk/blogs/blog/when-can-your-child-or-toddler-face-forward-in-a-child-s-...

Is there a way to make these a reasonable size?  I have tried various snippets of CSS from this site but no luck just yet!

[BSS-TekLabs · Accepted solution]

- Here is the solution for you @Mercury363 
- Please follow these steps: 

- Then find the theme.liquid file.
- Then add the following code at the before tag </head> and press 'Save' to save it.

 

<style>
@media only screen and (min-width: 600px) {
.container--no-margin-if-not-first:not(:first-of-type) {
    width: 700px !important;
}
}
</style>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[BSS-TekLabs · Accepted solution]

- Here is the solution for you @Mercury363 
- Please follow these steps: 

- Then find the theme.liquid file.
- Then add the following code at the before tag </head> and press 'Save' to save it.

 

<style>
@media only screen and (min-width: 600px) {
.container--no-margin-if-not-first:not(:first-of-type) {
    width: 700px !important;
}
}
</style>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[BSSCommerce-HDL · Accepted solution]

Hi @Mercury363, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.article__featured-image {
    max-width: 650px !important;
}
</style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-B2B]

@Mercury363 , 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
@media only screen and (max-width: 600px) {
    .article__featured-image {
       max-width: calc(100% - 200px - 5rem);
    }
}
</style>

Your image will be responsive to your site's dimensions:

If it helps you, please like and mark it as the solution.

Best Regards 😍

[Mercury363]

Thank you - both worked I just tweaked it slightly to make it smaller again!  Much appreciate all the quick replies on this one! 🙂