custom module position for desktop/mobile view

osseo

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!

saguaros

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

paulus1031

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;
}
}

paulus1031

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

Cheers
Paul