Hi,
I have a custom HTML module on my JA University template homepage assigned to "department" position.
And I want this module to appear only on "mobile" view when the screen size drop off to certain wdith, so I made that module position visible under the template "responsive layout" for "small and extra small". This function works well as you can see from the staging URL above that module will only be visible for small screen. However, on the desktop computer or "large" screen size it will show a white space in place where the "department position module" which created a visible gap... I'm not sure how I can get rid of that white space gap so it won't show up on the desktop view? (see my screenshot with red marks)

Thanks!

    Hi There,

    Try adding

    .itemid-101 #t3-department .container {padding-bottom:0; border-bottom:0;padding-bottom:0;}

    @media (max-width: 992px) {
    .itemid-101 #t3-department .container {
    border-bottom: 1px solid #efece1;
    margin-bottom: 30px;
    padding-bottom: 30px;
    }
    }

    I should mention adding .itemid-101 means this style only targets the home page

    Cheers
    Paul

    osseo
    Hi,

    You can try using this custom CSS code:

    @media (min-width: 480px) {
    #t3-department {
        display: none;
    }    
}

    put into the file: root/templates/ja_university_t3 (your default template)/css/custom.css (Create this file if it doesn't exist)

    Regards

      Write a Reply...
      You need to Login to view replies.