thumbnail issue

I did somethnig similiar by playing with teh CSS (for me, it was an issue of controling the display size of the thumbnail.)

https://studentaffairs.lasalle.edu/umas/advent-calendar/

.entry-thumbnail img {margin: 0 10px 10px 0}

.advent-calendar__day .wp-post-image {max-width: 45%;}

Hi Manakuke,

I tried this, but no luck..The thumbnails are situated behind the numbers.
Any idea what I can do?

Thanks,

Cathrine

The .advent-calendar__day class is creating a box. The image, date, and date background all have to fit with that box (sort of). You can try changing the width on .advent-calendar__day from 15% to an absolute (ie 100px) but that will change how many dates in a row you can display. Your theme page constraints are influencing how much 15% turns out to be, which impacts how big a box you have to play with, which limits how you can place the image. The actual image width, therefore, prevents any changes in the margin settings from having an impact on placement. You can try

.advent-calendar__day .wp-post-image {margin-left:-10px;}

This will get the image to move to the left a bit, but since you are limited on space, you can’t move it too far.

You could also try making the background of the date opaque after the day launches. Customizing the background CSS for the .advent-calendar__day-number class should do the trick in this case.

.advent-calendar__day-number {
    opacity: 0.4;
    filter: alpha(opacity=40);
}

But if you do this, make sure to set the following after the above, or everything will be opaque.

.advent-calendar__day--future .advent-calendar__day-number {
    opacity: 1;
    filter: alpha(opacity=100);
}

In theory this could work/help.

I will have a go at that.

Thank you Manakuke!

Cathrine