Home › Forums › Legacy Support › Support queries › Styling issues › Grid of Courses
- This topic has 10 replies, 3 voices, and was last updated 4 years ago by Diana.
Viewing 11 posts - 1 through 11 (of 11 total)
-
AuthorPosts
-
April 27, 2020 at 6:28 am #254621MiguelMartinLSpectatorHow can I get the grid of courses for sale aligned? I see that it is not only a problem of the size of the image, but of the name of the course, or the number of instructors it has. Is there a way to fit them on a grid so that they line up with the same cell height?April 27, 2020 at 6:29 am #254622MiguelMartinLSpectatorThis reply has been marked as private.April 27, 2020 at 8:19 am #254660JacksonBlockedHello @MiguelMartinl, Use the code given below go to appearance>>customization>>custom css and paste it : div#course-dir-list ul.item-list.grid li.course_single_item .row .item { height:160px !important; } div#course-dir-list ul.item-list.grid li.course_single_item .row .item-avatar img{ max-width:390px; height:300px !important; } Thanks,April 29, 2020 at 8:00 am #255257MiguelMartinLSpectatorThis reply has been marked as private.April 30, 2020 at 7:27 am #255528JacksonBlockedHello @MiguelMartinL, A) Okay, please provide page URL after that I will share page specific code as well as your site specific, B) For this you can use this code go to appearance>>customization>>custom CSS and paste given below : .post-type-archive.post-type-archive-product.custom-background .col-md-9.col-sm-8.col-md-push-3.col-sm-push-4 { min-width: 100% !important; left: 0 !important; } Refer: https://prnt.sc/s8fofy Thanks,April 30, 2020 at 4:02 pm #255675MiguelMartinLSpectatorThis reply has been marked as private.May 1, 2020 at 11:59 am #255859JacksonBlockedHello @MiguelMartinL, A) Use this code to make grid align proper : body.bp-nouveau div.vibe_grid ul.grid li.clear6.col-md-2 { height:450px !important; } body.bp-nouveau div.vibe_grid ul.grid li div.courseitem .block_media a img { height: 180px !important; } body.bp-nouveau div.vibe_grid ul.grid li div.courseitem .block_content { height:220px !important; } Refer:https://prnt.sc/s91kwx B) For other site (Spanish site) https://sportcoach.es/shop/ use this code to make full-width shop page : .archive.post-type-archive.post-type-archive-product .col-md-9.col-sm-8.col-md-push-3.col-sm-push-4 { min-width: 100% !important; left: 0 !important; } To make 6 in one row : C) For this site https://sportcoach.es/en/shop/ use this code: body.bp-nouveau ul.products.columns-4 { display: flex !important; flex-flow: row wrap; } body.bp-nouveau ul.products.columns-4 li.col-md-3.col-sm-6{ flex-basis: 16%; min-width:190px; } And for this use this https://sportcoach.es/shop/ one : body.archive.post-type-archive.post-type-archive-product ul.products.columns-4 { display: flex !important; flex-flow: row wrap; } body.archive.post-type-archive.post-type-archive-product ul.products.columns-4 li.col-md-3.col-sm-6{ flex-basis: 16%; min-width:190px; } Thanks,May 1, 2020 at 7:39 pm #255950MiguelMartinLSpectatorThis reply has been marked as private.May 2, 2020 at 2:14 pm #256164DianaParticipantThis reply has been marked as private.May 2, 2020 at 4:07 pm #256191MiguelMartinLSpectatorThis reply has been marked as private.May 4, 2020 at 4:14 am #256336DianaParticipantThis reply has been marked as private.
-
AuthorPosts
Viewing 11 posts - 1 through 11 (of 11 total)
- The topic ‘Grid of Courses’ is closed to new replies.