Blog > Full Text: Restrict image size

This topic has 20 replies, 4 voices, and was last updated 7 years by Radu.

Author
November 12, 2016 at 18:42 #144005

meltdown
Participant

When the full text of a blog post is displayed, the main image is stretched to fit the content container, which degrades the resolution.

For example (please see attached image): The image size is 546 x 600px. However, it is scaled to 782 x 869px, which is much too big. How can I restrict the image size?

Thanks

Attachments:
You must be logged in to view attached files.
November 14, 2016 at 08:19 #144119

Laura
Moderator
Hello, try using this css
COPY CODE
```
img.attachment-kleo-full-width {
    width: 60% !important;
}
```
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂
November 14, 2016 at 11:23 #144132

meltdown
Participant

This reply has been set as private.
November 15, 2016 at 19:41 #144323

Laura
Moderator
Hello, try adding this to style.css of chid theme
COPY CODE
```
.article-media.kleo-banner-slider div {
    width: 50%;
}
```
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂
November 16, 2016 at 18:10 #144415

meltdown
Participant

This reply has been set as private.
November 17, 2016 at 09:34 #144537

Laura
Moderator
Hello, try this, at style.css
COPY CODE
```
.article-media.kleo-banner-slider div {
    width: 50% !important;
}
```
Does it work? 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂
November 17, 2016 at 12:11 #144555

meltdown
Participant

In Google Chrome it had no effect. In Firefox it literally cut the image in half 🙁

Attachments:
You must be logged in to view attached files.

November 18, 2016 at 08:06 #144657

Laura
Moderator

Hello, i see, can you tell me the exact size you want it to be?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂
November 18, 2016 at 17:03 #144688

meltdown
Participant
Thanks for your response. Isn’t the size that I want somewhat dependent on the size of the image, which may vary? What seems right to me would be that the image fills about 60% of the container width, even if the image itself is much bigger than that.

I would have that that your first solution, as seen below, would have worked, but it cut the image in half:
COPY CODE
```
.article-media.kleo-banner-slider div {
    width: 50% !important;
}
```
Using a percentage seems best, but can it be done without cutting the image?

Thanks again
November 22, 2016 at 05:40 #144962

Laura
Moderator
Hello, try this:
COPY CODE
```
.caroufredsel_wrapper {
    width: 500px !important;
    height: 500px !important;
}
.caroufredsel_wrapper img {
    width: 500px !important;
}
```
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂
November 22, 2016 at 12:25 #144996

meltdown
Participant

I’m a bit frustrated with this. The code you provided does restrict the image to 500px. However, when viewing the post snippet on the main blog page, it also pushes the text associated with the post down 500px, creating a huge gap (see attachment).

Rather than all this css, isn’t it possible to just change the setting that forces the gallery image to stretch to full width? For example (please see second attached image): The gallery image size is 550 x 550px. However, it is being stretched to fit the container, which makes the images much too big and degrades the quality. Can’t we just stop the gallery from doing that?

Thanks again

Attachments:
You must be logged in to view attached files.

November 24, 2016 at 05:06 #145168

Laura
Moderator

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

November 24, 2016 at 19:20 #145237

Radu
Moderator

Hi,

You want to have normal image size(not stretched) only in article page ?

Meanwhile remove all CSS that laura has provided to you and tell me the rest of templates where you need the image with default display ratio

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

November 25, 2016 at 16:50 #145333

meltdown
Participant

Thanks for your assistance Radu. I have removed all CSS that Laura provided for this thread.

The two instances where it seems to be an issue is when I use the “Standard” post option, the “Image” post option and the “Gallery” post option. If those could default to a normal image size I would be quite pleased.

Thanks again
November 28, 2016 at 12:56 #145407

Radu
Moderator
Hi,

Try this
COPY CODE
```
.article-media img {
    width: auto !important;
}
```
Let me know

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?
November 28, 2016 at 13:07 #145414

meltdown
Participant
Great – Thank you. Is it possible to center the image/gallery? I tried the following but it had no affect:
COPY CODE
```
.article-media img {
    width: auto !important;
    margin-left: auto;
    margin-right: auto;
}
```
Thanks again
November 28, 2016 at 18:45 #145444

Radu
Moderator
Replace the CSS wit this
COPY CODE
```
.article-media img {
    width: auto !important;
    margin: 0 auto !important;
    display: block;
}
```
Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?
November 28, 2016 at 18:58 #145453

meltdown
Participant

Perfect! Thanks to both you and Laura for your help. I’ll mark this as resolved 🙂

November 29, 2016 at 17:03 #145532

Radu
Moderator

Great

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

December 8, 2016 at 20:50 #146463

mrcee
Participant

Where do you put that CSS code?

December 9, 2016 at 17:09 #146567

Radu
Moderator

The Css will be added to wp-admin -> theme options -> general settings -> quick css

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?
Author

Posts