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
Best answer by Philcahill87
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
.course__detail__video {display:none;}
Code:
.course__detail__asset {display:none;}
.course__detail__video {display:none;}
Alternative:
Lastly if you are trying to do it only on one content item you can use a HTML widget in the detail page sidebar and add the <style> tag.
<style>
.course__detail__asset {display:none;}
.course__detail__video {display:none;}
</style>
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
.course__detail__video {display:none;}
Code:
.course__detail__asset {display:none;}
.course__detail__video {display:none;}
Alternative:
Lastly if you are trying to do it only on one content item you can use a HTML widget in the detail page sidebar and add the <style> tag.
<style>
.course__detail__asset {display:none;}
.course__detail__video {display:none;}
</style>
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.
img[srcset*="cloudfront.net/thoughtindustries"] {
display: none;
}
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
/* 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%;
}
}
Thanks
Already have an account? Login
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
