I have been trying to change the size of the tiles used in Elegance on the course page. I can effect the change by adding the following css:
.section li.activity {
height: 120px !important;
width: 170px !important;
padding: 10px;
}
However, it is also affecting a label that I have on the front page! Any suggestions on how to limit the changes to just the tiles?
.path-course .section li.activity {}
Thanks Danny!
Ok - getting closer but something in this code (and not the obvious margin-top setting which I needed because the tiles were overlapping the topic summary) is causing some dead space between tiles and a label. Apparently, the height setting is also applying to labels on the page and I obviously cannot set a fixed height for a label. Tried setting initial and auto for height on the label which shrink the gap a little but not enough. See screenshot.
Here is my code:
.path-course .section li.activity {
height: 120px;
width: 180px;
float: left;
margin-right: 5px;
margin-top: 35px;
padding: 5px;
}
.section .activity .activityinstance>a {
padding-right: 15px;
}
Would appreciate any help.
<style>
body{padding: 3%;};
.contenedor-video {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;}
/*añadido por Ana: cambia dimensiones de caja recursos*/
.path-course .section li.activity {
height: 120px;
width: 180px;
float: left;
margin-right: 5px;
margin-top: 35px;
padding: 5px;
}
.section .activity .activityinstance>a {
padding-right: 15px;
}
/*********************/
.contenedor-video iframe,
.contenedor-video object,
.contenedor-video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.pcursos{ font-size:1.3em;
color: #55969B; padding-left: 10px;}
/***FORMULARIO DE ENTRADA***/
.loginpanel form#guestlogin input[type="submit"] {
float: right;
top: 11px;
}
.loginpanel, .signuppanel {
padding-bottom:50px;
}
@media only screen and (max-width:600px) {
.loginpanel, .signuppanel {
padding-bottom:100px;}
}
@media only screen and (max-width:450px) {
.loginpanel, .signuppanel {
padding-bottom:200px;}
}
</style>
If you have the same trouble with labels, the following code appears to fix that:
.section .activity.modtype_label.label {
height: auto;
margin-bottom: -35px;
}
You might need to play with the margin-bottom amount though - I found it differed on my dev site to my live site. Maybe because I am using Danny's theme on the dev and Julian's on the live site.
I just want you to know that your fix just saved my life after hours searching, trying code and auditing css. I am not a programmer so I have been doing this without knowing what I was doing. But your code did it and I can go to bed now. THANK YOU Emma Richardson may you have the best week of your life!!!!
Thank you.
I think this deserves a big cheer for Emma!
