How to resize my image per posts in ethos

Hi to all,

I would like to ask for help regarding my image per posts in such a way that it will not extend or cover the whole border width limit of my every post articles. I would like to make it align or in line with the width limit of the articles and not the border of the content itself. Thanks in advance.

Hi There,

To resize the featured image in the single post, please add this custom CSS under X > Theme Options > CSS:

.single-post .entry-featured {
    max-width: 50%;
    margin: 0 auto;
}

Hope it helps :slight_smile:

Hi @thai,

Thank you for your reply. The image really reduce to about 50% and it was placed similar to a right indent at the width border. What I want is for my image to have the same article width or align to the maximum article width itself and not to the maximum blog boundary/limit. You may visit cabinfreedom.com and camperreport.com as examples of image without touching the border. Thank you again.

Hi there,

Which image? What I see is a listing page with a sidebar. I checked your site and it has the same layout in your provided example sites.

Are you referring to single pages? If yes, then please add this code to your global custom javascript.

jQuery('.single-post .entry-featured').insertBefore ('.x-main');

Then this CSS to your global custom CSS

.single-post .entry-featured img {
width: 100%;
}

Thanks!

Hi @Rad,

Thank you for your reply. Yes, it is on single pages every time you click the title of each post. I followed your instructions but, the image still extends to the content width border and not align to the article width border. Again, you may take a look at cabinfreedom.com/guide-relaxing-outdoors-cabin/ In that site, the image does not touch the sidebar border. The image is align to the article post limit.

Hey @jqtroy,

Here’s what Ethos’ single post featured image looks like out of the box.

If you want it to look like this:

Add this code to Theme Options > CSS.

.single-post .x-main.left .hentry .entry-featured {
    margin-right: 0;
}

Ethos’ entry featured right margin is the one extending it outside of the area.

If you want to move the image on top of the content like this:

And, add this code to Theme Options > JS

jQuery('.single-post .entry-featured').prependTo('.single-post .entry-content');

Hope that helps.

1 Like

Hi christian_y,

You got it right what I mean! Thank you so much! I am also grateful to @Rad, maybe he didn’t quite get well because of my failure to explain it well. Actually, I am still confused between the terms content width and site width. I will now apply the code you gave. Again, thank you so much to all of you.

You’re welcome. The site width includes the content and the sidebar while the content width only is for the content.

Here is the site https://learninghomeschool.com

I see. Please replace the CSS code given previously with this.

.single-post .x-main.left .hentry .entry-featured {
    margin-top: 0;
    margin-right: 0;
}

Hi @christian,

Upon saving your new code in the css, here is the message I got.

The preview could not load due to the iframe response being incomplete. This is most often related to a plugin conflict, or customizations introducing a PHP error.

Origin URL: https://learninghomeschool.com

Preview URL: https://learninghomeschool.com

Hi there,

Glad that you have managed to fix the original problem. The last problem you have mentioned may be caused by different reasons. I suggest that you open up a separate thread and give us the detailed information and the result of the steps below to follow up:

  1. Ensure everything is up to date according to our version compatibility list here. Please follow the best practices when updating your theme and plugins. Click here for more information.
  2. Test for a plugin conflict. You can do this by deactivating all third-party plugins, and see if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.
  3. Remove custom CSS and Javascript from the options and/or Child Theme and test the case.
  4. If you’re using a CDN, please clear the CDN’s cache and disable optimization services.
  5. Increase the PHP Memory Limit of your server. Click here for more detailed information and how to increase the PHP memory limit.
  6. Reset your htaccess file by renaming it to .htaccess-bak. Then in WP Admin Menu, go to Settings > Permalinks and just click the Save Changes button.

Please do not add the reply here and open up a separate thread for the additional question.

Thank you

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.