Question 30780 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Oxygen blog cards styling in CSS – WordPress

I created a blog on my WordPress website, which I developped using Oxyegen. So far so good, but My problem is within the blog cards : my image is square [1]: https://i.stack.imgur.com/vezTY.png , but I would want it more rectangular, and full width as shown on my first example [2]: https://i.stack.imgur.com/Bj7sx.png . How can I do that ?

Here is the link : https://comportementaliste-du-chat.fr/blog/

And here is my code :

%%EPID%% .oxy-posts {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; 
}


%%EPID%% .oxy-post {
  display: flex;
  flex-direction: column;
  text-align: left;
  align-items: flex-start;
  padding: 20px;
  box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.3);
  border-radius : 30px;
}

%%EPID%% .oxy-post-image {
  margin-bottom: 1em;
  position: relative;
  width: 100%;
  oxy-post-image :hover;
  transition-duration : 0.3s
}

%%EPID%% .oxy-post-image-fixed-ratio {
  padding-bottom: 100%;
  background-size: cover;
  background-position: center center;
}

%%EPID%% .oxy-post-image-date-overlay {
  position: absolute;
  top: 1em;
  right: 1em;
  font-size: .7em;
  color: white;
  background-color: rgba(0,0,0,0.5);
  padding: .7em 1em;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
}

%%EPID%% .oxy-post-title {
  font-size: 1.5em;
  line-height: 1.2em;
  Text-decoration : none !important;
}

%%EPID%% .oxy-post-meta {
  margin-top: 0.5em;
  font-size: .8em;
  display: flex;
  flex-direction: row;
}

%%EPID%% .oxy-post-meta-item::after {
    content: "0b7";
    margin-right: .5em;
    margin-left: .5em;
}

%%EPID%% .oxy-post-meta-item:last-child::after {
    content: "";
    display: none;
}

%%EPID%% .oxy-post-content {
  margin-top: 1em;
  margin-bottom: 1em;
}

%%EPID%% .oxy-post-content p {
  margin: 0;
}

@media (max-width: 1120px) {
  %%EPID%% .oxy-post-meta {
    display: none;
  }
}

I tried somethind like this but it’s incomplete and I’m not sure I’m in the right direction :

#_posts_grid-41-243658 .oxy-post-image {
    margin-bottom: 1em;
    position: relative;
    width: 100%;
    oxy-post-image: hover;
    transition-duration: 0.3s;
    background: blue;
}

#_posts_grid-41-243658 .oxy-post-image-fixed-ratio {
    padding-bottom: 100%;
    background-size: 100%;
    height: 50%;
    background-position: top center;
    background-repeat: no-repeat;
    margin-bottom: 0 !important;
    /* background-color: red; */
}

Can anybody help me please ? Thank you !

Tags:

2

Answers


  1. 0

    The reason images are not spanning the whole width of the card is because the card itself .oxy-post has a 20px padding. You can remove this padding (and adding it back only for the text content’s container), the image will span the width of the card that way.

    As the other answers will probably mention, changing the height of the card image container to your liking will make it rectangular.

    Login or Signup to reply.
  2. 0

    Using a background image is already a good idea, as opposed to using a img tag.

    This is what I would do to solve the problem:

    1. Remove the outer padding of the card if you want the image to go up the edges.
    2. Put a div around the title and text of the card and give that div the padding you want. Also remove the margib-bottom of the .oxy-post-image class.
    3. Size the .oxy-post-image tag how you wish and give the div inside of it that has the background-image height: 100%.

    The only thing that should still look different from your desired outcome is the border-radius of the image. You can help this by giving the .oxy-post-image-fixed-ratio class a border-radius of ’15px 15px 0 0′. This will remove the border radius in the bottom two corners.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search