display of my courses not aligned

Hi

I wonder why my courses display is weird and not aligned. .. Please help

http://primary.aucl.com.my/courses/

  • Bojan Radonic
    • Head of Support

    Hey there @pole915,

    How are you doing today?

    Reason images are being displayed like that is because for the first course image is being added into the content of course summery and the second one is using featured listing image instead of image in the content if that makes sense, try using one or the other way if you want both courses to look the same in the course listing page.

    Once you do please let me know so we can try to apply some CSS to fix the second issue as well :slight_smile:

    Cheers,
    Bojan

  • Bojan Radonic
    • Head of Support

    Hey again @pole915,

    Sorry for the delay on this one, the above should be fairly easy to fix with some custom CSS.

    The easiest way to add CSS to your site would be to use plugins such as this one http://wordpress.org/plugins/simple-custom-css

    Once the plugin is installed and activated you can add this code to Appearance -> Custom CSS:

    .post-type-archive-course article.type-course.has-post-thumbnail .quick-course-info {
        width: 71%;
    }

    This should be the result, see screenshot.

    Hope this helps :slight_smile:

    Cheers,
    Bojan

  • pole915
    • Site Builder, Child of Zeus

    Hi Bojan,

    Thanks it works. Can it be done when i am using mobile, as you can see in the attached, it might not have enough space to display all. However, i hope it can be displayed like the time, when it has no enough space, it shows ..., for example Member... rather than moving downwards. Thanks.

  • pole915
    • Site Builder, Child of Zeus

    Hi Bojan,

    I have tried using the scale of 29% until 10% , it eats up the word become MEME instead of MEMBERSHIP, but it does not help, being as MEME it is still being pushed down wards rather staying at the same line.

    What i need is like the date as above, NOVEMBER 2015 becomes NOVEMBER...,
    in this case will be MEMBERSHIP to MEMBER..., and stays at the same line

  • Bojan Radonic
    • Head of Support

    Hey again @pole915,

    Please try replacing the above code with this one:

    @media screen and (max-width: 480px) {
    .post-type-archive-course .quick-course-info .course-cost {
        width: 34%;
    }
    
    .quick-course-info button.apply-button.apply-button-details {
        min-width: 90px;
    }
    }

    This should be result on the mobile, see screenshot.

    Hope this helps :slight_smile:

    Cheers,
    Bojan

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.