Course main image problems

rogermont

Hello,

We are migrating to Guru 6.2.1 and we are having problems with how the main image of a course is displayed in the default layout.

In previous versions, this image was displayed as the backgound of the .gru-cover div. Among other things, this allowed to put the curse title and purchase button "on top" of it, and also to use box-shadow to add texture to the image with css.

With the new version, the image is displayed as an image inside the div. This doesn't allow to place the title on top of it, and also prevents the use of box-shadow to fine tune its appearance.

This new option is breaking the look of our site and with it all the screenshots we have in different advertisements, leaftlets, etc.

Could you please reintroduce the option of displaying the main image as a background?

Thank you.

Best,
Roger.

saguaros

Hi Roger,

We added this custom css:

.gru-cover {
    position: relative;
}

.gru-course-info {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
}

Kindly check.

rogermont

Hi Saguaros,

Thank you for lookikng into this.

That solves the problem of positioning the title on top of the cover, thank you!

How can we get back the box shadow efect on the image? Without it the title can't be read properly.

Thank you.

Best,
Roger.

saguaros

Try this custom css:

.gru-course-detail .gru-course-media:before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 height: 100%;
 width: 100%;
 box-shadow: 0 80px 100px #000 inset, 0 -100px 100px #000 inset;
}

.gru-course-detail .gru-course-media img {
 height: 100%;
 object-fit: cover;
 width: 100%;
}

rogermont

Hi Saguaros,

That solves it, thank you!

Best,
Roger.