- This topic has 4 replies, 2 voices, and was last updated 10 years, 2 months ago by Sarah.
Viewing 5 posts - 1 through 5 (of 5 total)
-
AuthorPosts
-
January 6, 2014 at 7:20 pm #18934SarahMember
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?
January 6, 2014 at 11:59 pm #18943SakinKeymaster@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 */ }
January 7, 2014 at 6:45 am #18959SarahMemberThanks Sakin, I added that and it looks great on my mobile but now I get only one column on a full screen computer too.
January 7, 2014 at 10:51 pm #18990SakinKeymaster@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%; } }
January 8, 2014 at 5:13 am #19016SarahMemberThanks Sakin 🙂
-
AuthorPosts
Viewing 5 posts - 1 through 5 (of 5 total)
- The topic ‘3 columns looking bad on mobile’ is closed to new replies.