Free CSS: Replace course completion image

  • 8 August 2022
  • 3 replies
  • 63 views
lrodman
Rank
Userlevel 7
Badge +4 
/*fancier course completion screen*/
div.complete-course-icons {
	background: url(https://docebo-institute.s3.us-east-2.amazonaws.com/public/course-completion-banner.png) no-repeat;

  margin-left: 20%;
  margin-right: 20%;
  margin-top: 8%; 
  height: 300px;
}
div.complete-course-icons em.fa.fa-trophy.gm-yellow {
	visibility: hidden !important;
}
div.bg-white.chapter-viewer__body.tile-background div.course-completed-ready.ng-star-inserted {
	margin-top: 0px; 
}

 

3 replies

Bfarkas
Rank
Userlevel 7
Badge +2

Have you tried this at multiple screen sizes/layouts? Curious.

lrodman
Rank
Userlevel 7
Badge +4

Limited testing but yes.

 

We have some widgets that don’t work well a widths below 1280px so we are ok with pages looking “smushed” if the user is using a tiny screen of some kind.

 

I’m definitely interested in working on this to make it more portable/responsive.

Bfarkas
Rank
Userlevel 7
Badge +2

You might want to look into breakpoints via media queries a bit based on a fw things you are doing. Those, plus setting min and max points on size help to redo page looks at the different size devices and monitors, rather than trying to find one percentage that is okay but not great across them all. Also helps load an image properly sized for the context.

Keep in mind, screen size doesn’t equal just changing devices, but what happens if I resize my browser, so I may be a PC user who operates on split screen constantly, pretty common when learning to reference two items, half the screen is now my size.

Here’s some info on media queries if interested (and there's a ton of great blogs on it too):

https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp

Reply


Terms & ConditionsCookie settings