How to set a max-width on a responsive theme (Graffito)
-
-
- Sueweil
- Newbie
- Posts: 6
- Thanks: 0
-
Hello, everyone!
Big fan of RocketTheme here. I've built a site with a heavily customized Graffito template, and I'm wondering how to do the following:
I'd like to set the theme as responsive, but I'd like to also set its overall max width to 960px. In other words, the responsive view that activates from 960-whatever simply wouldn't activate.
Any guidance would be much appreciated, and again -- I'm a huge fan of RocketTheme.
Thanks!!! :cheesy:
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
-
-
- Sueweil
- Newbie
- Posts: 6
- Thanks: 0
-
Henning, thanks so much for the link! Unfortunately, it's telling me I don't have permission to view the forum. Could I trouble you to paste in the relevant information?
Thanks again for your time!
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
try to add this to your custom css file
@media only screen and (min-width: 960px) {
div.rt-container {width: 960px;}
div.rt-container div.rt-grid-1 {width: 80px;}
div.rt-container div.rt-grid-2 {width: 160px;}
div.rt-container div.rt-grid-3 {width: 240px;}
div.rt-container div.rt-grid-4 {width: 320px;}
div.rt-container div.rt-grid-5 {width: 400px;}
div.rt-container div.rt-grid-6 {width: 480px;}
div.rt-container div.rt-grid-7 {width: 560px;}
div.rt-container div.rt-grid-8 {width: 640px;}
div.rt-container div.rt-grid-9 {width: 720px;}
div.rt-container div.rt-grid-10 {width: 800px;}
div.rt-container div.rt-grid-11 {width: 880px;}
div.rt-container div.rt-grid-12 {width: 960px;}
div.rt-container div.rt-push-1 {left: 80px;}
div.rt-container div.rt-push-2 {left: 160px;}
div.rt-container div.rt-push-3 {left: 240px;}
div.rt-container div.rt-push-4 {left: 320px;}
div.rt-container div.rt-push-5 {left: 400px;}
div.rt-container div.rt-push-6 {left: 480px;}
div.rt-container div.rt-push-7 {left: 560px;}
div.rt-container div.rt-push-8 {left: 640px;}
div.rt-container div.rt-push-9 {left: 720px;}
div.rt-container div.rt-push-10 {left: 800px;}
div.rt-container div.rt-push-11 {left: 880px;}
div.rt-container div.rt-pull-1 {left: -80px;}
div.rt-container div.rt-pull-2 {left: -160px;}
div.rt-container div.rt-pull-3 {left: -240px;}
div.rt-container div.rt-pull-4 {left: -320px;}
div.rt-container div.rt-pull-5 {left: -400px;}
div.rt-container div.rt-pull-6 {left: -480px;}
div.rt-container div.rt-pull-7 {left: -560px;}
div.rt-container div.rt-pull-8 {left: -640px;}
div.rt-container div.rt-pull-9 {left: -720px;}
div.rt-container div.rt-pull-10 {left: -800px;}
div.rt-container div.rt-pull-11 {left: -880px;}
div.rt-container div.rt-prefix-1 {padding-left: 80px;}
div.rt-container div.rt-prefix-2 {padding-left: 160px;}
div.rt-container div.rt-prefix-3 {padding-left: 240px;}
div.rt-container div.rt-prefix-4 {padding-left: 320px;}
div.rt-container div.rt-prefix-5 {padding-left: 400px;}
div.rt-container div.rt-prefix-6 {padding-left: 480px;}
div.rt-container div.rt-prefix-7 {padding-left: 560px;}
div.rt-container div.rt-prefix-8 {padding-left: 640px;}
div.rt-container div.rt-prefix-9 {padding-left: 720px;}
div.rt-container div.rt-prefix-10 {padding-left: 800px;}
div.rt-container div.rt-prefix-11 {padding-left: 880px;}
}
-
-
-
- Sueweil
- Newbie
- Posts: 6
- Thanks: 0
-
Hemming, thank you again for the speedy reply! I believe that did the trick, but I wanted to check in on best practices for adding a custom css sheet. Here's what I did:
• I uploaded a custom.less file to the /less/ directory
• I used @import in the template.less file to call that custom.less file
Is that the best way to do it?
Again, thank you for your help!
-
Time to create page: 0.068 seconds