How to Get my Featured image as a thumbnail on the homepage?

Support
#1

Hi there, A few months back I purchased and then shortly asked for a refund after realizing that I may have made a mistake buying the theme. I was turned down.

Can you kindly assist with the image sizing ie.

I have the same image on the top of blog post which I upload, then I want the same image to show but as a thumbnail on the preview of all post as does on the homepage, problem is - on the home page, the image is exactly the same size, so large and ugly. How do I get the same image on the homepage to be a smaller size as thumbnail eg. 400x200.

Things I did,

  • Changed the image sizing when uploading the same image as a featured image
  • added the CSS code
    .single-post .entry-featured {
    display:none;
    }
    because this was the advice from another guy who got his images to work but mine didn’t

Example of the huge images on the homepage:

Example of how i want it to be:

https://drummingcorner.com/

  • see the homepage post for : How Much does a Drum Set Weigh?
    (that’s how i’d like the image to show as smaller)

Thanks

#2

Hi Jeremy,

To achieve that, please add this custom CSS under Theme Options > CSS:

.blog article,
.archive article {
    display: flex;
    background: #fff;
}
.blog .entry-featured,
.archive .entry-featured {
    width: 35%;
    box-shadow: none;
    flex: 0 0 250px;
    align-self: center;
    margin-left: 25px;
}
.blog .entry-wrap,
.archive .entry-wrap {
    box-shadow: none;
}

@media (max-width: 767px){
    .blog article,
    .archive article {
        flex-flow: wrap;
    }
    .blog .entry-featured,
    .archive .entry-featured {
        flex: 0 0 100%;
        margin: 0
    }
}

Here are some related links for further reading:

Hope this helps.

#3

Thank you very much, that worked.

  • I’ve been trying to get my posts on the home page packed closer to each other instead of have such huge gaps inbetween,
  • in the same token reducing the titles of the font size of the posts so that it fits more characters in a line?
  • and to get the font a bit larger in my actual post.
    I’ve tried looking up all of this under the Customize option but it’s but very deliberate in it’s description of what each thing changes on my site.

An example of what i’d like to achieve is this - https://homedefenseacademy.com/

Lastly, how do i add a main banner onto the top of the site home page?

thanks

#4

Hello Jeremy,

Do you want something like this?

If that is the case, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.blog .x-main .hentry, 
.search .x-main .hentry, 
.archive .x-main .hentry {
    margin-top: 15px;
    padding-top: 15px;
}

For the font sizes, please go to X > Theme Options > Typography > Headings to increase the font size of the titles which is H2. Go to X > Theme Options > Typography > Body And Content if you want to increase the font size of the post contents.

Hope this helps.

#5

Thank you very much for all your help.

Unfortunately that script didn’t seem to change anything.

Also, the changing font stuff, for the H2, its all relating to the spacing, not the size of the font.

I don’t mean to be ungrateful or rude but this theme isn’t exactly user-friendly like usual free themes and as is advertised seeing that i need a script for simple things.

so what do i do next if that script didn’t add any changes?
thanks again

#6

Hello Jeremy,

I have tested the code both in your site’s browser console and in my local testing server before I gave it in my response. It should have work out of the box. The big problem is that you are using W3 Total Cache. After making ANY site changes, you must clear the plugin caches first before you test your site. This can cause the changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.

The font size of the post titles were computed based from the site’s root font size. In addition to the code, you can make use of this css if you want to change the font sizes of the post titles.

h2.entry-title {
  font-size: 20px;
}

Again, you will have to clear the plugin cache or even your browser cache first before testing your site.

Hope this helps. Please let us know how it goes.

#7

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