Tagged: css, responsive
- This topic has 5 replies, 2 voices, and was last updated 9 years, 11 months ago by fluegasknowhow.
-
AuthorPosts
-
September 25, 2014 at 10:13 pm #44810fluegasknowhowMember
Hello Sakin,
I’m trying to resize the columns of the 3 column layout of catch evolution theme.entering the following code in CSS custom:
.wrapper { margin: 0 auto; width: 1300px; } .three-columns .content-sidebar-wrap { float: right; width: 1050px; } .three-columns #primary { width: 740px; } .three-columns #secondary { width: 300px; } .three-columns #third { float: left; width: 240px; }
or, for a max width of 1200px:
.three-columns .content-sidebar-wrap { float: right; width: 980px; } .three-columns #primary { width: 700px; } .three-columns #secondary { width: 270px; } .three-columns #third { float: left; width: 200px; }
the theme runs very well on desktop. It has the sizes I’m really need.
But, going mobile, the theme completely messes up!
The columns don’t get on pile, but show as they were on a desktop.
I’m sure I’m missing something in the customization code to be responsive.
can you help me?
the site is http://fluegasknowhow.com/flue-gas-properties/
currently none of the above mentioned custom code are applied.thank you!!!
September 26, 2014 at 12:01 am #44828SakinKeymaster@fluegasknowhow: I am bit confused about your question as when I check in your site, you are using two column layout. So, what’s this with three columns.
September 26, 2014 at 4:18 am #44852fluegasknowhowMemberSakin,
yes, I deactivated the three columns layout and switched to two columns.
If you need it, I can restore the three column layout to check what’s wrong with my CSS customization on mobile devices.
ThanksSeptember 26, 2014 at 5:07 am #44858fluegasknowhowMember@sakin: OK, now I reactivated the 3 columns layout.
please check it in a mobile viewer (iphone 4) and you will see that something’s wrong with my CSS customizationSeptember 27, 2014 at 1:50 am #44930SakinKeymaster@fluegasknowhow: That is because of your custom css. Remove that and it will be fine. When adding css and changing the width you need to change in all the responsive width using media screens
@media screen and (max-width: 1224px) { }
See this https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=en
September 27, 2014 at 5:46 pm #44950fluegasknowhowMemberGot it!
problem solved!
Thank you very much!!! -
AuthorPosts
- The topic ‘Custom CSS for 3 columns layout’ is closed to new replies.