Fixed width layout guide

  • Hi

    I need to make a child theme with a fixed Width on max 1023 px. on the complete site incl. header, navigation and footer.
    I’m new to customizr. Can anyone guide me to how this is obtained most easily.
    Seems like there’s a lot of hardcoded Width styles in the css depending on viewport.

    Any help is higly appreciated, thanks.

    Peter

Viewing 6 replies - 1 through 6 (of 6 total)

  • This begs the question: Why?

    How will a fixed width 1023px help when viewed on a mobile device, for example?

    Czr is built on a Twitter Bootstrap framework which is designed to provide fully responsive sites on all viewports.

    Thread Starter mulgurul

    (@mulgurul)

    I need to implement a design received from a graphical designer.

    The design does not have full Width header and logo. All pages has a design where the max Width is 1023px.
    Thats just the max Width.

    When shown on smaller displays/devices it shold scale Down using the bootstrap and viewport, behaving responsive as normal.

    The FrontPage is oocupied with one row with 3 cols.
    Below is a second row with 6 cols

    Downscaling to smaller displays should stack the upper ros 3 cols on eachother, and stack the second row 2 cols per row on top of eachother.

    If I did this in plain bootstrap, if would not take me long, but here I need to adapt to all the customizr css, and how the template has been design.

    Thats why, this question!

    Thanks

    Should be easy then!

    You can use Czr out-of-the-box to achieve all that.

    The front page will be a Page containing (pseudo-code):

    <div span="row-fluid">
  <div class="span4">...</div>
  <div class="span4">...</div>
  <div class="span4">...</div>
</div>
<div span="row-fluid">
  <div class="span2">...</div>
  <div class="span2">...</div>
  <div class="span2">...</div>
  <div class="span2">...</div>
  <div class="span2">...</div>
  <div class="span2">...</div>
</div>

    See Snippet1 & Snippet2

    Thread Starter mulgurul

    (@mulgurul)

    Yes thank you for the tip, I was goind to use the customizr bootstrap row and col classes. But this still does not give me a 1023 px. viewport.

    I tried to encapulate the entire page including header and footer with a div with a Width on 1023px and automargen. It Works but the page content does not adjust Down and fit in. It seems that customizr has a fixed size on 1170px and that the row/col layout har fixed calculated Width.

    Does this mean that I either have to adapt the grapical layout to 1170, or recalculate all the col. Width values in the customizr css file? Like:
    .span12 {
    width: 1170px;
    }
    .span11 {
    width: 1070px;
    }
    .span10 {
    width: 970px;
    }

    Best regards, Peter

    I’d suggest Option 1, not Option 2

    Just solved this one

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Fixed width layout guide’ is closed to new replies.