Grid of Courses

Last updated on by

Home › Forums › Legacy Support › Support queries › Styling issues › Grid of Courses

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • April 27, 2020 at 6:28 am #254621
    MiguelMartinL
    Spectator
    How 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 #254622
    MiguelMartinL
    Spectator
    This reply has been marked as private.
    April 27, 2020 at 8:19 am #254660
    Jackson
    Blocked
    Hello @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 #255257
    MiguelMartinL
    Spectator
    This reply has been marked as private.
    April 30, 2020 at 7:27 am #255528
    Jackson
    Blocked
    Hello @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 #255675
    MiguelMartinL
    Spectator
    This reply has been marked as private.
    May 1, 2020 at 11:59 am #255859
    Jackson
    Blocked
    Hello @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 #255950
    MiguelMartinL
    Spectator
    This reply has been marked as private.
    May 2, 2020 at 2:14 pm #256164
    Diana
    Participant
    This reply has been marked as private.
    May 2, 2020 at 4:07 pm #256191
    MiguelMartinL
    Spectator
    This reply has been marked as private.
    May 4, 2020 at 4:14 am #256336
    Diana
    Participant
    This reply has been marked as private.
  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Grid of Courses’ is closed to new replies.