Blog > Full Text: Restrict image size

[meltdown]

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.

[Laura]

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 🙂

[meltdown]

This reply has been set as private.

[Laura]

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 🙂

[meltdown]

This reply has been set as private.

[Laura]

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 🙂

[meltdown]

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.

[Laura]

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 🙂

[meltdown]

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

[Laura]

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 🙂

[meltdown]

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.

[Laura]

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 🙂

[Radu]

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 ?

[meltdown]

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

[Radu]

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 ?

[meltdown]

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

[Radu]

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 ?

[meltdown]

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

[Radu]

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 ?

[mrcee]

Where do you put that CSS code?

[Radu]

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