Hello,
I was wondering if it's possible to get a two column grid for the courses page (= meestergijs.nl/cursusaanbod) when on a mobile phone? So instead of all the courses underneath each other, 2 rows of courses next to eachother.
Thanks,
Gijs
This reply has been marked as private.
This reply has been marked as private.
This reply has been marked as private.
This reply has been marked as private.
First one is great! Thank you
Gijs
ok checking
providing code in some time
hi
use this code:
@media only screen and (max-width: 768px){
ul#course-list {
column-count:2;
}
div#course-dir-list ul#course-list {
column-count: 2;
}
.directory.course div#course-dir-list ul#course-list .item-credits strong{
padding: 0px !important;
margin-left: -5px !important;
}
#buddypress #course-dir-list li div.item{
margin-top:0px;
}
}
ul#course-list li.course_single_item .row .col-md-8.col-sm-8 .item {
height: 100px !important;
}
This reply has been marked as private.
Ok. That worked, Veronica. Great!
One final touch... Can we align the courses
like this. And can we have them alphabetically
like this and not this?
Thanks a million!
Gijs
Well the creds are not working anymore please share them again to check that page .
This reply has been marked as private.
hi
here is the code:
@media only screen and (max-width: 768px){
.directory.course div#course-dir-list ul#course-list .item-credits strong{
padding: 0px !important;
margin-left: -5px !important;
}
ul#course-list li.course_single_item .row .col-md-8.col-sm-8 .item {
height: 100px !important;
}
ul#course-list {
display: flex;
flex-wrap: wrap;
}
ul#course-list li.course_single_item {
flex: 1;
}
}
refer the output:
http://prntscr.com/20yewx2
both requirements are fulfilled:
https://imgur.com/a/RBp04Si
https://imgur.com/a/WNDJJ2m
Again, it doesn't work here. How come? I checked computed diff, a lot of code is different. Is non missing from previous code? https://imgur.com/a/BLtkRtZ
.
