Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #44810

    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!!!

    #44828
    Sakin
    Keymaster

    @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.

    #44852

    Sakin,
    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.
    Thanks

    #44858

    @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 customization

    #44930
    Sakin
    Keymaster

    @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

    #44950

    Got it!
    problem solved!
    Thank you very much!!!

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Custom CSS for 3 columns layout’ is closed to new replies.