Make the "about course" page adapt to small screens

This commit is contained in:
Daniel Clemente Laboreo
2017-11-21 17:46:21 +02:00
parent a4095e49b2
commit c914527431

View File

@@ -1,6 +1,11 @@
.course-info {
.container {
padding-bottom: 120px;
@media screen and (max-width: $bp-screen-md) {
min-width: auto;
padding: 20px;
}
}
header.course-profile {
@@ -26,7 +31,11 @@
margin: 0 auto;
max-width: map-get($container-max-widths, xl);
min-width: 760px;
@media screen and (min-width: $bp-screen-md) {
min-width: $bp-screen-md;
}
position: relative;
z-index: 2;
@@ -291,10 +300,13 @@
}
.details {
@include float(left);
@include margin-right(flex-gutter());
@media screen and (min-width: $bp-screen-md) {
@include float(left);
@include margin-right(flex-gutter());
width: flex-grid(8);
}
width: flex-grid(8);
font: normal 1em/1.6em $serif;
h2 {
@@ -383,10 +395,12 @@
}
.course-sidebar {
@include box-sizing(border-box);
@include float(left);
@media screen and (min-width: $bp-screen-md) {
@include box-sizing(border-box);
@include float(left);
width: flex-grid(4);
width: flex-grid(4);
}
> section {
box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.15);