Docs

[JfantasyBooks]

Hey there, Themeco Team!

Name: JFantasyBooks
Site: Fantasy-Books
Site Url: https://fantasy-books.live
WordPress Version: 4.6.1
X Version: 4.6.4
Cornerstone Plugin Version: 1.3.3

Problem:

1. The thumbnails on the latest post show a zoomed in or resized image of the feature. I would like it to show it at full scale to preserve details. Can you help me?

2. Can you show me how to change the thumbnail size of the latest posts? And what if I want it to be 200 x 300. Or 100 X 500, or any size that’s not a square?

[Rad]

Hi there,

Thanks for posting in.

1. Please add this CSS to Admin > Appearance > Customizer > Custom > CSS

.blog .entry-featured a.entry-thumb {
    padding-bottom: 150%;
    background-size: contain;
}

About the quality, do you have plugins that change image URL?

https://fantasy-books.live/wp-content/uploads/2016/11/[email protected]

the original is

https://fantasy-books.live/wp-content/uploads/2016/11/Aeterna-Saga-Book-Cover2.jpg

I think @05x denotes the quality, though X doesn’t even have this kind of feature. Might be related to the plugin or hosting optimization feature.

2. That’s not currently possible since it’s made that way on this selected X’s stack. And the image is a background type, hence, container sizes will be the same regardless of image size. The style background-size: contain; means it will fill the container’s dimension with the image instead of cropping it.

Thanks!

[JfantasyBooks]

Thanks!

What if I want to change the container dimension? When I used background-size: contain; the container grew. Is there a way to make the overall container smaller?

The whole thing is a bit too large for me.

Edit: I changed the padding-bottom, which decreased the size of the image. But it seems the min width of the container is set. Anyway to decrease that as well?

[Lely]

Hi There,

In that case please use this custom CSS instead:

.blog .x-main .hentry>.entry-featured {
    width: 22%;/* Adjust this accordingly*/
}

No need to adjust the padding bottom. It will adjust both the image and the container.

Hope this helps.

[JfantasyBooks]

Ah! It’s perfect, only now there’s a large gap between the text/title and the thumbnail. Anyway of floating the excerpt and title closer to the thumbnail?

Or changing the parameters in some way?

[Lely]

Hi There,

Also add this:

.blog .x-main .hentry.has-post-thumbnail>.entry-wrap {
    width: 80%;
}

Hope this helps.

[JfantasyBooks]

You guys are awesome! Thank You.

[Rupok]

You are welcome!

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[JfantasyBooks]

Hello Again!

I realized that the featured post to excerpt didn’t look so good at all in mobile. Can you direct me the css to make changes so that it looks similar to what it should via desktop?

[Rad]

Hi there,

You mean to force it to display image on left and text on right? Or just make them stack all together?

Please try this,

@media ( max-width: 767px ) {
.blog .x-main .hentry>.entry-featured, .blog .x-main .hentry.has-post-thumbnail>.entry-wrap {
    width: 100%;
}
.blog .my_shortcode {
    position: static;
    width: 100%;
}
.blog .my_shortcode .x-section .x-container {
padding: 0px !important;
}
}

Thanks!

[JfantasyBooks]

Is it possible to force image on left and text on the right for mobile?

[Christopher]

Hi there,

Please update previous code to :

@media (max-width: 767px){
.blog .x-main .hentry.has-post-thumbnail>.entry-wrap {
    width: 68%;
    float: left;
}

.blog .x-main .hentry>.entry-featured {
    width: 30%;
    float: left;
    margin-right: 2%;
}
.blog .my_shortcode {
    position: static;
    width: 100%;
}
.blog .my_shortcode .x-section .x-container {
    padding: 0px!important;
}
}

Hope it helps.

[JfantasyBooks]

I managed to get it to how I like it. Thanks for helping me.

[Prasant Rai]

Happy to hear that. Feel free to ask us again. Have a great day! 🙂

[Author]

Posts