How can i change the size of the blog images?

[store095]

Hi, I want the preview images of my blog to be bigger and have rounded corners like here. And also a bit more space between the images.

is that possible?

Thank you.

[BSS-TekLabs · Accepted solution]

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

- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

 

.blog .page-width-desktop {
    padding: 0 !important;
}
.blog__posts.articles-wrapper .article {
    padding: 6px !important;
}
.card .card__inner .card__media {
    border-radius: 15px !important;
}

- 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]

.blog .page-width-desktop {
    padding: 0 !important;
}
.blog .blog__posts.articles-wrapper .article {
    padding: 6px !important;
}
.blog .card .card__inner .card__media {
    border-radius: 15px !important;
}

Can you try this code again @store095 

[BSS-TekLabs · Accepted solution]

This code will make your image square. If I want the exact size of the image you provide, I need the exact parameters of that image. Or you can state the request to make the image bigger or smaller. I will edit it for you.

[BSS-TekLabs · Accepted solution]

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

- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

 

.blog .page-width-desktop {
    padding: 0 !important;
}
.blog__posts.articles-wrapper .article {
    padding: 6px !important;
}
.card .card__inner .card__media {
    border-radius: 15px !important;
}

- Here is the result you will achieve:

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

[store095]

Thank you.

When i use the code in base.css it chaning the whole front page, even my category bubbles have the same form now.

Best regards

[BSS-TekLabs]

Let me check

[BSS-TekLabs · Accepted solution]

.blog .page-width-desktop {
    padding: 0 !important;
}
.blog .blog__posts.articles-wrapper .article {
    padding: 6px !important;
}
.blog .card .card__inner .card__media {
    border-radius: 15px !important;
}

Can you try this code again @store095 

[store095]

Thank you. 

Is it possible to make the image the same size as the bottom?:

[BSS-TekLabs]

Do you want to make the image square?

[store095]

Yes and same size as this:

Best regards

[BSS-TekLabs]

.blog .card__inner.gradient {
    --ratio-percent: 100% !important;
}

Can you add more code @store095 

[BSS-TekLabs · Accepted solution]

This code will make your image square. If I want the exact size of the image you provide, I need the exact parameters of that image. Or you can state the request to make the image bigger or smaller. I will edit it for you.

[store095]

Thank you.

Is it possible to make the square a little smaller like here?:

Thank you.

[BSS-TekLabs · Accepted solution]

Can you try remove this code @store095 

[store095]

Its working. Thank you 🙂