Post displayed in categories

Support
#1

Hi guys
I am not sure if this is possible but I try.
I have the posts displayed like this in the categories

But I would like them to be displayed like this horizontal with the pictures on the left ( see attachment)

is it possible?
thanks a lot
cheers
Isabella

#2

Hi There,

Thanks for sending us your query!

To make you understand, the different stacks are for different design. To make similar design as ethos you need some custom CSS. I have attached a screenshot how it will look after changing the css.

If you like that style, please add this custom CSS under Theme Options > CSS:

.archive .x-main .hentry>.entry-featured {
    float: left;
    width: 34%;
    margin: 0;
}
.archive .x-main .hentry.has-post-thumbnail>.entry-wrap {
    float: right;
    width: 66%;
    padding: 15px;
}
.archive h2.entry-title {
    font-size: 110%;
} 

.archive .entry-content.excerpt {
    margin-top: 10px;
}

Hope it helps :slight_smile:

#3

Hi there, that could work. I tried to insert the CSS code but didn’t see any changes

thanks for your help :slight_smile:

#4

Hello There,

Thanks for updating in!

Have the code updated and use this:

@media(min-width: 980px) {
  .archive .x-main .hentry {
    padding-bottom: 30px;
    border-bottom: solid 3px rgba(0,0,0,0.5);
  }

  .archive .x-main .hentry>.entry-featured {
    float: left;
    width: 34%;
    margin: 0;
  }

  .archive .x-main .hentry.has-post-thumbnail>.entry-wrap {
    float: right;
    width: 66%;
    padding: 0 0 0 35px;
    border: none;
    box-shadow: none;
  }

  .archive h2.entry-title {
    font-size: 110%;
  } 

  .archive .entry-content.excerpt {
    margin-top: 10px;
  }

  .archive .entry-footer {
    clear: both;
  }
}

This code will only work on screens larger than 980 pixels and on the archive pages only. This does not include the blog index.

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

#5

hey @RueNel
I love the way it looks on your side, but I can’t seem to make it work when I add the code.

… it just doesn’t change anything.
I tried to save it and clear the cache but nada!
o, now I see the squares that you mentioned in the other post…

please help :disappointed_relieved:
thanks cheers

#6

Hello Isabella,

As I have mentioned in my previous response:

This code will only work on screens larger than 980 pixels and on the archive pages only. This does not include the blog index.

You can see the code in action in your archive pages:
https://www.boundlessroads.com/tag/waterfalls/
https://www.boundlessroads.com/beyond/inspiring-journeys/

And if you want to include the blog index, please have the code updated and use this instead:

@media(min-width: 980px) {
  .blog .x-main .hentry,
  .archive .x-main .hentry {
    padding-bottom: 30px;
    border-bottom: solid 3px rgba(0,0,0,0.5);
  }

  .blog .x-main .hentry>.entry-featured,
  .archive .x-main .hentry>.entry-featured {
    float: left;
    width: 34%;
    margin: 0;
  }

  .blog .x-main .hentry.has-post-thumbnail>.entry-wrap,
  .archive .x-main .hentry.has-post-thumbnail>.entry-wrap {
    float: right;
    width: 66%;
    padding: 0 0 0 35px;
    border: none;
    box-shadow: none;
  }

  .blog h2.entry-title,
  .archive h2.entry-title {
    font-size: 110%;
  } 

  .blog .entry-content.excerpt,
  .archive .entry-content.excerpt {
    margin-top: 10px;
  }

  .blog .entry-footer,
  .archive .entry-footer {
    clear: both;
  }
}

We would loved to know if this has work for you. Thank you.

#7

Oh sorry sorry! yes it does work in the archives !
Love it!!

thanks much :slight_smile:
cheers

#8

You’re welcome!
It’s good to know that it has worked for you.

#9

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