Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #18934
    Sarah
    Member

    Hi Sakin,

    I’ve just recently gone from 2 to 3 columns and it looks great on a computer, but terrible on a small screen. When I had 2 columns only the main content would appear on a small screen which looked great, but with the three column template all three columns get squashed into the smaller screen causing some content to overlap. Is this a bug that is to be fixed or something I can remedy myself?

    Sarah
    http://thejuiceplanet.com

    #18943
    Sakin
    Keymaster

    @Sarah: It’s because of the following Custom CSS:

    /* For 2 columns primary, secondary and wrapper */
    .three-columns .content-sidebar-wrap {
        width: 83%;
    }
    .three-columns #primary {
        width: 70%;
    }
    .three-columns #secondary {
        width: 29.5%;
    }
    /* For 3rd column */
    .three-columns #third {
        width: 16.5%;
    }

    You need to add these inside

    @media screen and (min-width: 961px) {
    /* Custom Column CSS */
    }
    #18959
    Sarah
    Member

    Thanks Sakin, I added that and it looks great on my mobile but now I get only one column on a full screen computer too.

    #18990
    Sakin
    Keymaster

    @Sarah: You got me wrong. Please replace the following CSS:

    @media screen and (min-width: 961px) {
    /* Custom Column CSS */
    }
    
    /* For 2 columns primary, secondary and wrapper */
    .three-columns .content-sidebar-wrap {
        width: 83%;
    }
    .three-columns #primary {
        width: 70%;
    }
    .three-columns #secondary {
        width: 29.5%;
    }
    /* For 3rd column */
    .three-columns #third {
        width: 16.5%;
    }

    With the following CSS:

    @media screen and (min-width: 961px) {
    /* For 2 columns primary, secondary and wrapper */
    .three-columns .content-sidebar-wrap { width: 83%; }
    .three-columns #primary { width: 70%; }
    .three-columns #secondary { width: 29.5%; }
    /* For 3rd column */
    .three-columns #third { width: 16.5%; }
    }
    #19016
    Sarah
    Member

    Thanks Sakin 🙂

Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘3 columns looking bad on mobile’ is closed to new replies.