RocketTheme - TOPIC: [solved] Template Max Width

Welcome Guest! Login

0 items Join Now

- zambego
- Sr. Rocketeer
- Posts: 146
- Thanks: 2
SOLVED Template Max Width - Still Responsive

Posted 11 years 4 months ago
- Hi All,
  
  I am trying to set a maximum width for the template (say 1000px).
  
  I also want the site to remain responsive so using the layout mode 960px or 1200px fixed width wont work for me.
  
  What do I need to do to ensure the page will never exceed 1000px?
  
  Thanks.
#901857

David Goode
Preeminent Rocketeer
Posts: 17058
Thanks: 890
Web Designer and Host

Re: SOLVED Template Max Width - Still Responsive

Posted 11 years 4 months ago

Hi there,

I haven't tried this but my thoughts are that you need to adjust mediaqueries.less for the Large and Desktop elements.

The defaults are as follows...

// Large Mode
@media only screen and (min-width: 1200px) {
     .visible-large {
          display: inherit !important;
     }
     .hidden-large {
          display: none !important;
     }
}
 
// Desktop Modes
@media only screen and (min-width: 960px) and (max-width: 1199px) {
     .visible-large {
          display: none !important;
     }
     .hidden-large {
          display: inherit !important;
     }
     .visible-desktop {
          display: inherit !important;
     }
     .hidden-desktop {
          display: none !important;
     }    
     .promo {
          h1 {
               font-size: 3.7em;
          }
          p {
               font-size: 1.3em;
          }
     }
     .promo-image {
          width: 40%;
     }
     .promo-image img {
          max-width: 100%;
     }
}

Try changing (min-width: 1200px) to (max-width: 1000px) and then change (min-width: 960px) and (max-width: 1199px) to (max-width: 1000px)

Hope this helps

Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information

#901964

- zambego
- Sr. Rocketeer
- Posts: 146
- Thanks: 2
Re: SOLVED Template Max Width - Still Responsive

Posted 11 years 4 months ago
- Thanks for the reply.
  
  I saw these values but wasn't sure if it was the right place to make the changes.
  
  I'll give it a go.
#901995
- zambego
- Sr. Rocketeer
- Posts: 146
- Thanks: 2
Re: SOLVED Template Max Width - Still Responsive

Posted 11 years 4 months ago
- OK. That didn't seem to work.
  
  Checing that file those media queries appear to just set some difference classes etc based on the screen width.
  
  I have done a test of changing .rt-container to max-width:1000px
  
  Whilst it sort of worked it only succeeded in pushing the template out of whack and had 200px of overflow to the right....
#903116
- zambego
- Sr. Rocketeer
- Posts: 146
- Thanks: 2
Re: SOLVED Template Max Width - Still Responsive

Posted 11 years 4 months ago
- So I found the place to change it.
  
  grid.responsive.css
#903172
- Gene Teigland
- Jr. Rocketeer
- Posts: 36
- Thanks: 1
Re: SOLVED Template Max Width - Still Responsive

Posted 11 years 4 months ago
- What directory did you find that file in because Im trying to do the same thing. It's not in the css template directory. Thanks!
#907584
- Gene Teigland
- Jr. Rocketeer
- Posts: 36
- Thanks: 1
Re: SOLVED Template Max Width - Still Responsive

Posted 11 years 4 months ago
- Found it for anybody who needs the info in the future:
  
  .../libraries/gantry/css
- The following users have thanked you: Bernd Robl
#907586
- Gene Teigland
- Jr. Rocketeer
- Posts: 36
- Thanks: 1
Re: SOLVED Template Max Width - Still Responsive

Posted 11 years 4 months ago
- Alright here's more details. I was running into the problem where my menu went to the second line and some text when too wide when I went to a wider display.
  
  Here's how I fixed it so I could have a max-width of 960px and still use my responsive template that you select in the Template Administrator Advanced Tab.
  
  1.Go the file:
  root/libraries/gantry/css/grid-responsive.css
  
  2. On line 8: Change body to min-width: 80px - Reason 80x 12 (column display) 960px
  3. On line 11 change .rt-container to width: 960px
  
  4. Now you have to modify the all rt-grids to match the 80px math but fortunately all you have to do is copy and paste.
  
  5. At around line 64 copy the code .rt-grid-1 {width: 80px;} to about line 112 .rt-prefix-11 {padding-left: 880px;}
  } (don't forget the last curly bracket.)
  
  5. Now paste that over the above section from line 13 through line 60
  
  That's it now you have the 960px max on large displays will still keeping the responsive template that works so well for mobile devices.
#907608
- asturian
- Newbie
- Posts: 4
- Thanks: 0
Re: SOLVED Template Max Width - Still Responsive

Posted 11 years 4 months ago
- Since i didn't like the 1200px width, i tried to change the max-width to 960px. Your solution worked fine for me, thank you very much
#908525
- zambego
- Sr. Rocketeer
- Posts: 146
- Thanks: 2
Re: SOLVED Template Max Width - Still Responsive

Posted 11 years 4 months ago
- Right just so you all know. I would recommend using the custom css for this. Read how to add custom css on these forms or in the help.
  
  I am now using that and it works fine.
  
  Here is what I did...
  
  It sets the max template size to 1020
  
  /* Responsive Layout Change to 1020 */
  @media only screen and (min-width: 1020) {
  div.rt-container {width: 1020px;}
  div.rt-grid-1 {width: 85px;}
  div.rt-grid-2 {width: 170px;}
  etc...
  
  @media only screen and (min-width: 960px) and (max-width: 1019px) {
  div.rt-container {width: 960px;}
  div.rt-grid-1 {width: 80px;}
  div.rt-grid-2 {width: 160px;}
#908956

Time to create page: 0.133 seconds