Home Page widget area CSS chagne

Hi, I am building a site, at http://www.englishjump.net.
I want to change a homepage widget area below the slider. At the widget area, I want to show 3 or 5 courses in a row. As of now the courses are arranged in a column. I attach two pictures. The first one is current state of my site. The other one is the form which I want to achieve in that widget area.
I would appreciate it if you could help me.
Thank you.

Jeonghun

  • Sajid
    • DEV MAN’s Sidekick

    Hi there Jeonghun,

    Hope you are doing good today :slight_smile:

    Try adding following code to make it grid and somewhat look like to your attached screenshot. I don't have exact color codes so I used color names feel free to replace them with exact color code like "green".

    .ld_course_grid {
        float: left;
        width: 30%;
        margin-right: 57px;
    }
    .ld_course_grid:last-child {
        margin-right: 0px;
    }
    .ld_course_grid .price {
        position: absolute;
       background-color: green !important;
        top: 10px;
        padding: 0px 10px;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }
    .ld_course_grid .entry {
        position: relative;
    }
    .ld_course_grid h3.entry-title {
        color: #fff !important;
    }

    Hope that helps :slight_smile:

    Cheers, Sajid

  • Jeonghun
    • The Incredible Code Injector

    Thank you very much, @@Sajid.
    Is there any way to make the grid responsive.
    It works great in desktop mode but it's not looking good in mobile.
    How could I make it look natural in cell phone?
    Thank you in advance.

  • Sajid
    • DEV MAN’s Sidekick

    Hi @Jeonghun,

    Hope you are doing good today :slight_smile:

    I can see you have fixed this issue on courses page. However to make it responsive for mobile, you are already using bootstrap classes.

    I am posting the updated code that will restrict the width on desktop only and leave the mobile view for your bootstrap to handle it.

    @media only screen and (min-width: 980px ){
    .ld_course_grid {
        float: left;
        width: 30%;
        margin-right: 57px;
    }
    }
    .ld_course_grid:last-child {
        margin-right: 0px;
    }
    .ld_course_grid .price {
        position: absolute;
       background-color: green !important;
        top: 10px;
        padding: 0px 10px;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }
    .ld_course_grid .entry {
        position: relative;
    }
    .ld_course_grid h3.entry-title {
        color: #fff !important;
    }

    Hope that helps :slight_smile:

    Cheers, Sajid

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.