Image of the post in the home blog page isn't a 100% height

Support
#1

hi
please how can i force the image to fit 100% height of the post status in the home blog page (the red square in the image)

thanks

#2

Hi there,

Please add this code in the custom CSS:

@media (min-width: 1226px) and (max-width: 1303px) {
    .home.x-ethos .entry-featured a.entry-thumb {
         padding-bottom: 70%;
     }
}

@media (min-width: 980px) and (max-width: 1225px) {
    .home.x-ethos .entry-featured a.entry-thumb {
         padding-bottom: 115%;
     }
}

Hope this helps.

#3

is it possible to make it fit automatically because like this i wont work perfectly because it depend of the length of the title, i’m adding a “read more” button and other stuff
i was already obliged to add more steps as you see in my css to fit for different configurations
thanks for your help

#4

Hi There,

Please add following css.

.blog .x-main .hentry:first-of-type, .search .x-main .hentry:first-of-type, .archive .x-main .hentry:first-of-type {
  display: table;
}
.home.x-ethos .entry-featured a.entry-thumb {
 position: absolute;
width: 100%;
height: 100%;
}
.blog .x-main .hentry > .entry-featured {
    display: table-cell;
    position: relative;
    overflow: hidden;
    float: none;
}

.blog .x-main .hentry.has-post-thumbnail > .entry-wrap, .search .x-main .hentry.has-post-thumbnail > .entry-wrap, .archive .x-main .hentry.has-post-thumbnail > .entry-wrap {
     display: table-cell;
     float: none;
}

@media (min-width: 480px) and (max-width: 600px) {
.blog .x-main .hentry.has-post-thumbnail > .entry-wrap, .search .x-main .hentry.has-post-thumbnail > .entry-wrap, .archive .x-main .hentry.has-post-thumbnail > .entry-wrap {
     display: block;
}
 .blog .x-main .hentry > .entry-featured {
    display: block;
    position: relative;
    overflow: hidden;
}
.home.x-ethos .entry-featured a.entry-thumb {
 position: relative;
}
.blog .x-main .hentry:first-of-type, .search .x-main .hentry:first-of-type, .archive .x-main .hentry:first-of-type {
  display: block;
}
}

Please let us know how it works.

Thanks

#5

it works fine till the width 766 - 600px image disappear
then it aapprease fro 600- to 480 then disappears again

on chrome image is ok dont have space on the top but on firefox (57) it has a margin in the top

#6

Hi again,

Please add the following code in your Customizer as well:

.blog .x-main .hentry > .entry-featured {
     width: 40%;
}
@media screen and (max-width: 600px) {
    .blog .x-main .hentry > .entry-featured {
        width: 100%;
    }
}

Let us know how this goes!

#7

on less then 480 the post is no longer image up text down but left - right

and always the problem of the margin on top of the image on firefox

#8

Hi there,

From your existing CSS, please change this line

@media (min-width: 480px) and (max-width: 600px) {

to this

@media (max-width: 600px) {

Thanks!

#9

works fine but i have always the margin top problem with firefox

#10

Hi there,

Looks okay on my firefox, but please change this CSS

.home.x-ethos .entry-featured a.entry-thumb {
 position: absolute;
width: 100%;
height: 100%;
}

to this

.home.x-ethos .entry-featured a.entry-thumb {
 position: absolute;
width: 100%;
height: 100%;
top:0;
}

Hope this helps.

#11

thanks a lot for you help that was great

#12

you are most welcome!

Thanks

#13

didnt see that but when i enter category or archive … the image in no longuer ok
do i have to edit more css classes
Thanks

#14

it’s fine i added for all the above those missing with search and archive
dont know if its good or not but add to ALL
is it good or could be some trouble in some cases
thanks

#15

sorry when i did that was ok on categories but no more ok in home page
dont know what to do :frowning:

#16

Hello There,

I have compared your homepage and category page. I did not see any difference.

Could you please clarify the remaining issue?

Thanks.

#17

i just added search & archives for theses classes and went ok thanks a lot

.home.x-ethos .entry-featured a.entry-thumb, .search.x-ethos .entry-featured a.entry-thumb, .archive.x-ethos .entry-featured a.entry-thumb { position: absolute; width: 100%; height: 100%; top:0px } .blog .x-main .hentry > .entry-featured, .search .x-main .hentry > .entry-featured, .archive .x-main .hentry > .entry-featured { width: 40%; } @media screen and (max-width: 600px) { .blog .x-main .hentry > .entry-featured, .search .x-main .hentry > .entry-featured, .archive .x-main .hentry > .entry-featured { width: 100%; } }

thanks

#18

You’re most welcome!

Thanks

#19

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