Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • July 4, 2023 at 4:01 pm #1412431
    GePu

    Hi there!
    Maybe someone can give me a hint how to change the background-color of the featured image when displayed by the blog-post-element in grid style. Normally (I think) this wouldn´t even show up because it would be covered by the whole image. But I didn´t want to display the images beeing cropped (some of the images are in portrait-mode so I wanted to keep the original aspect ratio.

    With the help of the plugin SIMPLE IMAGE SIZES I was able to display the featured images (I think the portfolio size is beeing used for that) in original aspect ratio. But now there is a grey background in the container which I want to get rid of.

    Here is a link to a test page (please ignore the masonry-part on top): http://xanadu-project.org/masonry-blog/

    I want it to be the same as the page-background color in that section (white).

    I also was thinking about making the images align to the left & bottom if this also possible.

    Is it possible to do this just for that certain page via Quick CSS?
    What would be the correct code for that?

    I tried out a lot but couldn´t find the correct class to change that.

    July 4, 2023 at 6:26 pm #1412453
    Mike

    Hey GePu,
    For your grid posts to make the background white try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    .main_color .avia-content-slider .slide-image {
	 background: #fff;
}

    To align them to the left try this css:

    .avia-content-slider .slide-image img {
    margin: 0;
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    July 4, 2023 at 8:54 pm #1412459
    GePu

    Hi Mike,
    thanks for the hint. Your code worked like a charme.

    Best regards,
    GePu

    July 4, 2023 at 9:33 pm #1412462
    GePu

    Hi Mike,
    I think I was too happy that it worked so good that I was overseeing that the images are still aligned to the top. You can see it at the post “another one” and “new post” that they do align to the top.

    Is there any chance to make them align to the bottom so that the titles are all on the same line?

    THX in advance,
    GePu

    July 5, 2023 at 12:34 am #1412475
    Nikko

    Hi GePu,

    Can you try adding this CSS code in Quick CSS: (the code is specific only to your given page)

    @media only screen and (min-width:981px) {
  .page-id-31 #after_section_3 .avia-content-slider .slide-entry-wrap {
    display: flex;
    align-items: baseline;
  }
}

    Hope it helps.

    Best regards,
    Nikko

    July 5, 2023 at 7:05 pm #1412539
    GePu

    Hi Nikko,
    Thanks for the code, it worked fine.
    Best regards,
    GePu

    July 6, 2023 at 1:20 am #1412567
    Mike

    Hi,
    Glad Nikko was able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘change the background of featured image in blog-post-element (grid style)’ is closed to new replies.