RocketTheme - TOPIC: [solved] Template Max Width

Welcome Guest! Login

0 items Join Now

- David Goode
- Preeminent Rocketeer
- Posts: 17058
- Thanks: 890
- Web Designer and Host
Re: SOLVED Template Max Width - Still Responsive

Posted 12 years 4 months ago
- Thanks Zambego,
  
  This is good advice about using custom css as it will save losing it every time you upgrade Gantry.
  
  As GANTRY4 now incorporates LESS. There are two recommended methods for dealing with your custom changes to the template.
  
  1. For older templates (pre FRACTURE
  LESS compiler is not active), or for those of you that want to stick with traditional CSS, you can simply create a file called "<TEMPLATENAME>-custom.css" and put this file in the CSS folder of the template (where TEMPLATENAME is the name of the template e.g. rt_fracture). GANTRY4 will automatically load this CSS file. you can also have browser specific files by appending, for example, "-ie9" making the filename "<TEMPLATENAME>-custom-ie9.css"
  2. For those of you that want to use the power of
  LESS (compiled CSS), you can simply create a file called "template-custom.less" (that is the file name - don't change it) and put this file in the less folder of the template. Now clear your cache GANTRY4 will automatically detect this file and automatically compile the LESS code therein and put it into the compiled css for your site (along with the other compiled LESS files from the template). Note that you can just put ordinary CSS in a LESS file but you are strongly encouraged to learn more about LESS as it will speed up your development and make it clearer.
  Do not change the CSS files in the compiled-css folder as these changes will be lost whenever Gantry 4 detects a change in a LESS file, or the cache gets cleared.
  
  For more information on LESS please see the documentation on Gantry 4 at http://www.gantry-framework.org/documentation/joomla/advanced/less-css . Also, see this tutorial http://www.rockettheme.com/forum/index.php?f=662&p=860738&rb_v=viewtopic#p860738 .
- 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
#908979
- Phil Yonge
- Sr. Rocketeer
- Posts: 104
- Thanks: 15
Re: SOLVED Template Max Width - Still Responsive

Posted 10 years 10 months ago
- Hope its ok to bump old threads. Due to my custom styling 1200px max width is unsuitable so I need to make adjustments.
  
  David (or other staff), are you saying that instead of adding custom code like Zambego's code to rt_xxx-custom.css it should instead be put in template-custom.less? Just aking for clarification.
  
  Thanks
  
  Phil
#1112981
- Wesley Derbyshire
- Rocketeer
- Posts: 69
- Thanks: 5
- Wesley Derbyshire
Re: SOLVED Template Max Width - Still Responsive

Posted 10 years 9 months ago
- So, can this be applie dto a max width of 1800, with two stages 1200-1499 and 1500-1799 as well? I tried with funky results on the Oculos template. Used the custom.css file in the template CSS directory. Ifeel as though I could not override the base container and grid widths (1200, 100, 200, etc) Or should I say, the content container didn't resize. Of course, maybe there is an easier way to set the max width to a larger size?
#1123633

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

Re: SOLVED Template Max Width - Still Responsive

Posted 10 years 9 months ago

Hi Wesley,

You would need to create a new set of parameters for the css.

The easiest scenario is to allow the default responsive to work as it does and then add the following code to your custom css file...

@media (min-width: 1500px) {
    .rt-container {width: 1500px;margin: 0 auto;position: relative;}
    .rt-grid-1 {width: 125px;}
    .rt-grid-2 {width: 250px;}
    .rt-grid-3 {width: 375px;}
    .rt-grid-4 {width: 500px;}
    .rt-grid-5 {width: 625px;}
    .rt-grid-6 {width: 750px;}
    .rt-grid-7 {width: 875px;}
    .rt-grid-8 {width: 1000px;}
    .rt-grid-9 {width: 1125px;}
    .rt-grid-10 {width: 1250px;}
    .rt-grid-11 {width: 1375px;}
    .rt-grid-12 {width: 1500px;}

    .rt-push-1 {left: 125px;}
    .rt-push-2 {left: 250px;}
    .rt-push-3 {left: 375px;}
    .rt-push-4 {left: 500px;}
    .rt-push-5 {left: 625px;}
    .rt-push-6 {left: 750px;}
    .rt-push-7 {left: 875px;}
    .rt-push-8 {left: 1000px;}
    .rt-push-9 {left: 1125px;}
    .rt-push-10 {left: 1250px;}
    .rt-push-11 {left: 1375px;}

    .rt-pull-1 {left: -125px;}
    .rt-pull-2 {left: -250px;}
    .rt-pull-3 {left: -375px;}
    .rt-pull-4 {left: -500px;}
    .rt-pull-5 {left: -625px;}
    .rt-pull-6 {left: -750px;}
    .rt-pull-7 {left: -875px;}
    .rt-pull-8 {left: -1000px;}
    .rt-pull-9 {left: -1125px;}
    .rt-pull-10 {left: -1250px;}
    .rt-pull-11 {left: -1375px;}

    .rt-prefix-1 {padding-left: 125px;}
    .rt-prefix-2 {padding-left: 250px;}
    .rt-prefix-3 {padding-left: 375px;}
    .rt-prefix-4 {padding-left: 500px;}
    .rt-prefix-5 {padding-left: 625px;}
    .rt-prefix-6 {padding-left: 750px;}
    .rt-prefix-7 {padding-left: 875px;}
    .rt-prefix-8 {padding-left: 1000px;}
    .rt-prefix-9 {padding-left: 1125px;}
    .rt-prefix-10 {padding-left: 1250px;}
    .rt-prefix-11 {padding-left: 1375px;}    
}
@media (min-width: 1200px) and (max-width: 1499px) {
    .rt-container {width: 1200px;margin: 0 auto;position: relative;}
    .rt-grid-1 {width: 100px;}
    .rt-grid-2 {width: 200px;}
    .rt-grid-3 {width: 300px;}
    .rt-grid-4 {width: 400px;}
    .rt-grid-5 {width: 500px;}
    .rt-grid-6 {width: 600px;}
    .rt-grid-7 {width: 700px;}
    .rt-grid-8 {width: 800px;}
    .rt-grid-9 {width: 900px;}
    .rt-grid-10 {width: 1000px;}
    .rt-grid-11 {width: 1100px;}
    .rt-grid-12 {width: 1200px;}

    .rt-push-1 {left: 100px;}
    .rt-push-2 {left: 200px;}
    .rt-push-3 {left: 300px;}
    .rt-push-4 {left: 400px;}
    .rt-push-5 {left: 500px;}
    .rt-push-6 {left: 600px;}
    .rt-push-7 {left: 700px;}
    .rt-push-8 {left: 800px;}
    .rt-push-9 {left: 900px;}
    .rt-push-10 {left: 1000px;}
    .rt-push-11 {left: 1100px;}

    .rt-pull-1 {left: -100px;}
    .rt-pull-2 {left: -200px;}
    .rt-pull-3 {left: -300px;}
    .rt-pull-4 {left: -400px;}
    .rt-pull-5 {left: -500px;}
    .rt-pull-6 {left: -600px;}
    .rt-pull-7 {left: -700px;}
    .rt-pull-8 {left: -800px;}
    .rt-pull-9 {left: -900px;}
    .rt-pull-10 {left: -1000px;}
    .rt-pull-11 {left: -1100px;}

    .rt-prefix-1 {padding-left: 100px;}
    .rt-prefix-2 {padding-left: 200px;}
    .rt-prefix-3 {padding-left: 300px;}
    .rt-prefix-4 {padding-left: 400px;}
    .rt-prefix-5 {padding-left: 500px;}
    .rt-prefix-6 {padding-left: 600px;}
    .rt-prefix-7 {padding-left: 700px;}
    .rt-prefix-8 {padding-left: 800px;}
    .rt-prefix-9 {padding-left: 900px;}
    .rt-prefix-10 {padding-left: 1000px;}
    .rt-prefix-11 {padding-left: 1100px;}
}

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

#1123864

Wesley Derbyshire
Rocketeer
Posts: 69
Thanks: 5
Wesley Derbyshire

Re: SOLVED Template Max Width - Still Responsive

Posted 10 years 9 months ago

David - Thank You. Your CSS confirmed that I was on the right track, and realized that in Oculos there is a overlayed background that had a max width of 1200px. I adjusted that 1800px and all the funky stuff is gone. But, here is an additional thought: Would there be a befent to create breakpoints for 1200 and 1500 screen resolutions (weel not tha those exact width exist, but - just saying. Here is the CSS I added to Custom CSS file, and it seem sto work. Any reason that this would be problematic?

/* Responsive Layout Change to 1800 */
@media (min-width: 1800px) {
.rt-container {width: 1800px;margin: 0 auto;position: relative ;}
.rt-grid-1 {width: 150px ;}
.rt-grid-2 {width: 300px ;}
.rt-grid-3 {width: 450px ;}
.rt-grid-4 {width: 600px ;}
.rt-grid-5 {width: 750px ;}
.rt-grid-6 {width: 900px ;}
.rt-grid-7 {width: 1050px ;}
.rt-grid-8 {width: 1200px ;}
.rt-grid-9 {width: 1350px ;}
.rt-grid-10 {width: 1500px ;}
.rt-grid-11 {width: 1650px ;}
.rt-grid-12 {width: 1800px ;}

.rt-push-1 {left: 150px ;}
.rt-push-2 {left: 300px ;}
.rt-push-3 {left: 450px ;}
.rt-push-4 {left: 600px ;}
.rt-push-5 {left: 750px ;}
.rt-push-6 {left: 900px ;}
.rt-push-7 {left: 1050px ;}
.rt-push-8 {left: 1200px ;}
.rt-push-9 {left: 1350px ;}
.rt-push-10 {left: 1500px ;}
.rt-push-11 {left: 1650px ;}

.rt-pull-1 {left: -150px ;}
.rt-pull-2 {left: -300px ;}
.rt-pull-3 {left: -450px ;}
.rt-pull-4 {left: -600px ;}
.rt-pull-5 {left: -750px ;}
.rt-pull-6 {left: -900px ;}
.rt-pull-7 {left: -1050px ;}
.rt-pull-8 {left: -1200px ;}
.rt-pull-9 {left: -1350px ;}
.rt-pull-10 {left: -1500px ;}
.rt-pull-11 {left: -1650px ;}

.rt-prefix-1 {padding-left: 150px ;}
.rt-prefix-2 {padding-left: 300px ;}
.rt-prefix-3 {padding-left: 450px ;}
.rt-prefix-4 {padding-left: 600px ;}
.rt-prefix-5 {padding-left: 750px ;}
.rt-prefix-6 {padding-left: 900px ;}
.rt-prefix-7 {padding-left: 1050px ;}
.rt-prefix-8 {padding-left: 1200px ;}
.rt-prefix-9 {padding-left: 1350px ;}
.rt-prefix-10 {padding-left: 1500px ;}
.rt-prefix-11 {padding-left: 1650px ;}
}

@media only screen and (min-width: 1500px) and (max-width: 1799px) {
.rt-container {width: 1500px;}
.rt-grid-1 {width: 125px;}
.rt-grid-2 {width: 250px;}
.rt-grid-3 {width: 375px;}
.rt-grid-4 {width: 500px;}
.rt-grid-5 {width: 625px;}
.rt-grid-6 {width: 750px;}
.rt-grid-7 {width: 875px;}
.rt-grid-8 {width: 1000px;}
.rt-grid-9 {width: 1125px;}
.rt-grid-10 {width: 1250px;}
.rt-grid-11 {width: 1375px;}
.rt-grid-12 {width: 1500px;}

.rt-push-1 {left: 125px;}
.rt-push-2 {left: 250px;}
.rt-push-3 {left: 375px;}
.rt-push-4 {left: 500px;}
.rt-push-5 {left: 625px;}
.rt-push-6 {left: 750px;}
.rt-push-7 {left: 875px;}
.rt-push-8 {left: 1000px;}
.rt-push-9 {left: 1125px;}
.rt-push-10 {left: 1250px;}
.rt-push-11 {left: 1375px;}

.rt-pull-1 {left: -125px;}
.rt-pull-2 {left: -250px;}
.rt-pull-3 {left: -375px;}
.rt-pull-4 {left: -500px;}
.rt-pull-5 {left: -625px;}
.rt-pull-6 {left: -750px;}
.rt-pull-7 {left: -875px;}
.rt-pull-8 {left: -1000px;}
.rt-pull-9 {left: -1125px;}
.rt-pull-10 {left: -1250px;}
.rt-pull-11 {left: -1375px;}

.rt-prefix-1 {padding-left: 125px;}
.rt-prefix-2 {padding-left: 250px;}
.rt-prefix-3 {padding-left: 375px;}
.rt-prefix-4 {padding-left: 500px;}
.rt-prefix-5 {padding-left: 625px;}
.rt-prefix-6 {padding-left: 750px;}
.rt-prefix-7 {padding-left: 875px;}
.rt-prefix-8 {padding-left: 1000px;}
.rt-prefix-9 {padding-left: 1125px;}
.rt-prefix-10 {padding-left: 1250px;}
.rt-prefix-11 {padding-left: 1375px;}
}

@media only screen and (min-width: 1200px) and (max-width: 1499px) {
rt-container {width: 1200px;}
.rt-grid-1 {width: 100px;}
.rt-grid-2 {width: 200px;}
.rt-grid-3 {width: 300px;}
.rt-grid-4 {width: 400px;}
.rt-grid-5 {width: 500px;}
.rt-grid-6 {width: 600px;}
.rt-grid-7 {width: 700px;}
.rt-grid-8 {width: 800px;}
.rt-grid-9 {width: 900px;}
.rt-grid-10 {width: 1000px;}
.rt-grid-11 {width: 1100px;}
.rt-grid-12 {width: 1200px;}

.rt-push-1 {left: 100px;}
.rt-push-2 {left: 200px;}
.rt-push-3 {left: 300px;}
.rt-push-4 {left: 400px;}
.rt-push-5 {left: 500px;}
.rt-push-6 {left: 600px;}
.rt-push-7 {left: 700px;}
.rt-push-8 {left: 800px;}
.rt-push-9 {left: 900px;}
.rt-push-10 {left: 1000px;}
.rt-push-11 {left: 1100px;}

.rt-pull-1 {left: -100px;}
.rt-pull-2 {left: -200px;}
.rt-pull-3 {left: -300px;}
.rt-pull-4 {left: -400px;}
.rt-pull-5 {left: -500px;}
.rt-pull-6 {left: -600px;}
.rt-pull-7 {left: -700px;}
.rt-pull-8 {left: -800px;}
.rt-pull-9 {left: -900px;}
.rt-pull-10 {left: -1000px;}
.rt-pull-11 {left: -1100px;}

.rt-prefix-1 {padding-left: 100px;}
.rt-prefix-2 {padding-left: 200px;}
.rt-prefix-3 {padding-left: 300px;}
.rt-prefix-4 {padding-left: 400px;}
.rt-prefix-5 {padding-left: 500px;}
.rt-prefix-6 {padding-left: 600px;}
.rt-prefix-7 {padding-left: 700px;}
.rt-prefix-8 {padding-left: 800px;}
.rt-prefix-9 {padding-left: 900px;}
.rt-prefix-10 {padding-left: 1000px;}
.rt-prefix-11 {padding-left: 1100px;}
}

#1123944

- David Goode
- Preeminent Rocketeer
- Posts: 17058
- Thanks: 890
- Web Designer and Host
Re: SOLVED Template Max Width - Still Responsive

Posted 10 years 9 months ago
- Hi Wesley,
  
  I cannot thinks of any reason why there would be problems with the extra breakpoints.
  
  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
#1123945
- Wesley Derbyshire
- Rocketeer
- Posts: 69
- Thanks: 5
- Wesley Derbyshire
Re: SOLVED Template Max Width - Still Responsive

Posted 10 years 9 months ago
- Excellent - thank you for your help.
#1124031
- Z Mina
- Sr. Rocketeer
- Posts: 198
- Thanks: 0
Re: SOLVED Template Max Width - Still Responsive

Posted 10 years 8 months ago
- Does this also applies to rt_clarion 1.7 responsive?
  I mean all the details and same paths (except for template name)?
  
  Please advise, as I need to limit the max width for the following website:
  www.morningside-church.info/morningside333
  
  Regards
#1128568
- David Goode
- Preeminent Rocketeer
- Posts: 17058
- Thanks: 890
- Web Designer and Host
Re: SOLVED Template Max Width - Still Responsive

Posted 10 years 8 months ago
- Hi Z Mina,
  
  Should all be ok for your template too.
  
  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
#1128665
- Brandon Phillips
- Newbie
- Posts: 3
- Thanks: 0
Re: SOLVED Template Max Width - Still Responsive

Posted 10 years 2 months ago
- Gene Teigland wrote:
  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.
  Thank you. I was trying to figure this out and it worked perfectly for me.
#1179782

Time to create page: 0.085 seconds