How can I hide the giant thumbnail on the course detail page?
Hi! We’re trying to redesign the way the course detail page looks. Since the thumbnail is so large, it pushes important information past the scroll point. We’d rather the big thumbnail be hidden. Is anyone doing this already? How?
So instead of this:
Something more like
Page 1 / 1
@giovanna.orlando
This requires CSS. Its just one line but note that it will hide it from all details. .course__detail__asset {display:none;}
If you want to hide videos instead of the images you need to use a different target
@giovanna.orlando Or just don’t upload a catalog or details page image at all. Or go to layouts > details page and remove the placeholder for it. Hope this helps.
@Philcahill87 thanks so much! This works great for what I want.
Charles, thanks for your suggestion too, but I want to keep the images in the catalog, and just hide them on the course detail page. We customize many of our course detail pages, so want a solution that just takes care of them all at once instead of having to configure each one separately.
@giovanna.orlando You want this right ? This has a detail and catalog image but the change is global and here is the CSS. @Philcahill87 I just noticed your answer and it is not the same as mine. Is mine incorrect?
Phil’s answer is working for me so I’m sticking with it, but thanks again Charles.
We ended up going with shrinking the thumbnail instead, to a 30% width. And then for small screens, left it at 100%. Sharing here in case anyone else wants to do something similar. Thanks again @Philcahill87 for getting us rolling!
/* Resize the big thumbnail from the Course Detail Page */
.course__detail__asset {
width:30%;
}
@media screen and (max-width: 768px) {
.course__detail__asset {
width:100%;
}
}
@giovanna.orlando @Philcahill87 I didn’t see that Phil had replied at first but glad to see code share coming out of the coffin and into value added service. Thanks team.
@giovanna.orlando Thank you for sharing this!! It looks so much better smaller like this.
Thanks @LisaRollins ! We are really happy how it turned out.