SOLVED custom responsive 12 col. grid with max width 1824px
-
-
- Niels Binder
- Hero Rocketeer
- Posts: 255
- Thanks: 5
-
@david
My idea was to have the 16 grid to get for example 3 Textblocks horizontally at about 1920. So when the screen is only 1200 there are only 2 Textblocks shown and the third moves under the two. Finally in Smartphone view there is only one Textblock shown. Up now i got no response to my question about the 16 grid and Hennings seems to be the 12 grid version also ...
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
The 16 column version has also only a maximum of 6 positions just like the 12 column grid.
That's a matter of custom css in combination with media queries.
The 16 column wont give you what you want.
Actually there is no big difference between 12 and 16 and in all those years I never found a reason to use 16 columns.
-
-
-
- Niels Binder
- Hero Rocketeer
- Posts: 255
- Thanks: 5
- Aha. Good to know. Thanks.
-
-
-
- David Goode
- Preeminent Rocketeer
- Posts: 17058
- Thanks: 890
- Web Designer and Host
-
@Neuronaut,
I agree with Henning about the 12 vs 16 grid. Bearing in mind that the maximum grid is 6 positions that means 16/6 will not give equal columns. The same applies to 3 blocks as the layout would be 5|6|5
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
-
-
-
- Niels Binder
- Hero Rocketeer
- Posts: 255
- Thanks: 5
- If i only would know how to use the calculator from henning i could finish it myself ...
-
-
-
- Niels Binder
- Hero Rocketeer
- Posts: 255
- Thanks: 5
-
It seems that you are kidding around with me which is pretty useless for me.
Sure i looked at your less file already. I dont have the experience (and sure i will never get it) tochange these files without great risk of damage.
I mean why should i ask you if i know it already ? Why you show me that its possible but not workout a solution and just blame me ?
Its not workout from imagination. Strict steps to follow is needed as in your "possibility case".
Happy Christmas
-
-
-
- David Goode
- Preeminent Rocketeer
- Posts: 17058
- Thanks: 890
- Web Designer and Host
-
Hi Neuronaut,
The problem is that if we start working out different code for your needs then all members will expect us to do the same.
We will help if there is a minor problem or adjustment with a template. In your case you want to do something that we have not designed into the template. Henning has done some of the work for you so now you need to look at that and work out waht you want to do. Either that or pay someone to do it for you.
We do not have time to build peoples websites based on question after question, which is what seems to happen more and more these days. What is more frustrating is that some of those people are selling their services as web developers and then asking us for the answers they can't be bothered to investigate and learn about.
Our advice was that this is not the way forward at this time. As you seem insistent on taking that route then you will have to do the work.
Merry Christmas and a Happy New Year :cheesy:
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
-
-
-
- Niels Binder
- Hero Rocketeer
- Posts: 255
- Thanks: 5
-
Hi David.
I understand that. I wanted somebody to help me on the way not do the work. Maybe its the wrong forum or better only the very experts are helping here with some code but nobody explains how the things work together.
Its also my thing because a year ago i started to find out how to build a website with a left side menu and a design which never goes out the view from a 19 inch monitor.
Only when i see the first thread about 1920px i was remembered how far i got away from my dream website, i already made plenty compromises through the limitations of nowadays standard webdesign. Even i paid people in between to reach it, to find out that its too far from standards and needs to start from scratch what i dont have the money for.
Merry merry Christmas
-
-
-
- Niels Binder
- Hero Rocketeer
- Posts: 255
- Thanks: 5
-
It works now. In summery i did the following changes with cerulean template: Ich change grid-responsive.css in my templates/rt_cerulean/css folder from:
.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;}
@media only screen and (min-width: 1075px) and (max-width: 1314px) {
.rt-container {width: 960px;}
.rt-grid-1 {width: 80px;}
.rt-grid-2 {width: 160px;}
.rt-grid-3 {width: 240px;}
.rt-grid-4 {width: 320px;}
.rt-grid-5 {width: 400px;}
.rt-grid-6 {width: 480px;}
.rt-grid-7 {width: 560px;}
.rt-grid-8 {width: 640px;}
.rt-grid-9 {width: 720px;}
.rt-grid-10 {width: 800px;}
.rt-grid-11 {width: 880px;}
.rt-grid-12 {width: 960px;}
.rt-push-1 {left: 80px;}
.rt-push-2 {left: 160px;}
.rt-push-3 {left: 240px;}
.rt-push-4 {left: 320px;}
.rt-push-5 {left: 400px;}
.rt-push-6 {left: 480px;}
.rt-push-7 {left: 560px;}
.rt-push-8 {left: 640px;}
.rt-push-9 {left: 720px;}
.rt-push-10 {left: 800px;}
.rt-push-11 {left: 880px;}
.rt-pull-1 {left: -80px;}
.rt-pull-2 {left: -160px;}
.rt-pull-3 {left: -240px;}
.rt-pull-4 {left: -320px;}
.rt-pull-5 {left: -400px;}
.rt-pull-6 {left: -480px;}
.rt-pull-7 {left: -560px;}
.rt-pull-8 {left: -640px;}
.rt-pull-9 {left: -720px;}
.rt-pull-10 {left: -800px;}
.rt-pull-11 {left: -880px;}
.rt-prefix-1 {padding-left: 80px;}
.rt-prefix-2 {padding-left: 160px;}
.rt-prefix-3 {padding-left: 240px;}
.rt-prefix-4 {padding-left: 320px;}
.rt-prefix-5 {padding-left: 400px;}
.rt-prefix-6 {padding-left: 480px;}
.rt-prefix-7 {padding-left: 560px;}
.rt-prefix-8 {padding-left: 640px;}
.rt-prefix-9 {padding-left: 720px;}
.rt-prefix-10 {padding-left: 800px;}
.rt-prefix-11 {padding-left: 880px;}
}
to the following:
.rt-container {width: 1824px;margin: 0 auto;position: relative;}
.rt-grid-1 {width: 152px;}
.rt-grid-2 {width: 304px;}
.rt-grid-3 {width: 456px;}
.rt-grid-4 {width: 608px;}
.rt-grid-5 {width: 760px;}
.rt-grid-6 {width: 912px;}
.rt-grid-7 {width: 1064px;}
.rt-grid-8 {width: 1216px;}
.rt-grid-9 {width: 1368px;}
.rt-grid-10 {width: 1520px;}
.rt-grid-11 {width: 1672px;}
.rt-grid-12 {width: 1824px;}
.rt-push-1 {left: 152px;}
.rt-push-2 {left: 304px;}
.rt-push-3 {left: 456px;}
.rt-push-4 {left: 608px;}
.rt-push-5 {left: 760px;}
.rt-push-6 {left: 912px;}
.rt-push-7 {left: 1064px;}
.rt-push-8 {left: 1216px;}
.rt-push-9 {left: 1368px;}
.rt-push-10 {left: 1520px;}
.rt-push-11 {left: 1672px;}
.rt-pull-1 {left: -152px;}
.rt-pull-2 {left: -304px;}
.rt-pull-3 {left: -456px;}
.rt-pull-4 {left: -608px;}
.rt-pull-5 {left: -760px;}
.rt-pull-6 {left: -912px;}
.rt-pull-7 {left: -1064px;}
.rt-pull-8 {left: -1216px;}
.rt-pull-9 {left: -1368px;}
.rt-pull-10 {left: -1520px;}
.rt-pull-11 {left: -1672px;}
.rt-prefix-1 {padding-left: 152px;}
.rt-prefix-2 {padding-left: 304px;}
.rt-prefix-3 {padding-left: 456px;}
.rt-prefix-4 {padding-left: 608px;}
.rt-prefix-5 {padding-left: 760px;}
.rt-prefix-6 {padding-left: 912px;}
.rt-prefix-7 {padding-left: 1064px;}
.rt-prefix-8 {padding-left: 1216px;}
.rt-prefix-9 {padding-left: 1368px;}
.rt-prefix-10 {padding-left: 1520px;}
.rt-prefix-11 {padding-left: 1672px;}
@media only screen and (min-width: 1420px) and (max-width: 1899px) {
.rt-container {width: 1344px;}
.rt-grid-1 {width: 112px;}
.rt-grid-2 {width: 224px;}
.rt-grid-3 {width: 336px;}
.rt-grid-4 {width: 448px;}
.rt-grid-5 {width: 560px;}
.rt-grid-6 {width: 672px;}
.rt-grid-7 {width: 784px;}
.rt-grid-8 {width: 896px;}
.rt-grid-9 {width: 1008px;}
.rt-grid-10 {width: 1120px;}
.rt-grid-11 {width: 1232px;}
.rt-grid-12 {width: 1344px;}
.rt-push-1 {left: 112px;}
.rt-push-2 {left: 224px;}
.rt-push-3 {left: 336px;}
.rt-push-4 {left: 448px;}
.rt-push-5 {left: 560px;}
.rt-push-6 {left: 672px;}
.rt-push-7 {left: 784px;}
.rt-push-8 {left: 896px;}
.rt-push-9 {left: 1008px;}
.rt-push-10 {left: 1120px;}
.rt-push-11 {left: 1232px;}
.rt-pull-1 {left: -112px;}
.rt-pull-2 {left: -224px;}
.rt-pull-3 {left: -336px;}
.rt-pull-4 {left: -448px;}
.rt-pull-5 {left: -560px;}
.rt-pull-6 {left: -672px;}
.rt-pull-7 {left: -784px;}
.rt-pull-8 {left: -896px;}
.rt-pull-9 {left: -1008px;}
.rt-pull-10 {left: -1120px;}
.rt-pull-11 {left: -1232px;}
.rt-prefix-1 {padding-left: 112px;}
.rt-prefix-2 {padding-left: 224px;}
.rt-prefix-3 {padding-left: 336px;}
.rt-prefix-4 {padding-left: 448px;}
.rt-prefix-5 {padding-left: 560px;}
.rt-prefix-6 {padding-left: 672px;}
.rt-prefix-7 {padding-left: 784px;}
.rt-prefix-8 {padding-left: 896px;}
.rt-prefix-9 {padding-left: 1008px;}
.rt-prefix-10 {padding-left: 1120px;}
.rt-prefix-11 {padding-left: 1232px;}
}
@media only screen and (min-width: 1075px) and (max-width: 1419px) {
.rt-container {width: 960px;}
.rt-grid-1 {width: 80px;}
.rt-grid-2 {width: 160px;}
.rt-grid-3 {width: 240px;}
.rt-grid-4 {width: 320px;}
.rt-grid-5 {width: 400px;}
.rt-grid-6 {width: 480px;}
.rt-grid-7 {width: 560px;}
.rt-grid-8 {width: 640px;}
.rt-grid-9 {width: 720px;}
.rt-grid-10 {width: 800px;}
.rt-grid-11 {width: 880px;}
.rt-grid-12 {width: 960px;}
.rt-push-1 {left: 80px;}
.rt-push-2 {left: 160px;}
.rt-push-3 {left: 240px;}
.rt-push-4 {left: 320px;}
.rt-push-5 {left: 400px;}
.rt-push-6 {left: 480px;}
.rt-push-7 {left: 560px;}
.rt-push-8 {left: 640px;}
.rt-push-9 {left: 720px;}
.rt-push-10 {left: 800px;}
.rt-push-11 {left: 880px;}
.rt-pull-1 {left: -80px;}
.rt-pull-2 {left: -160px;}
.rt-pull-3 {left: -240px;}
.rt-pull-4 {left: -320px;}
.rt-pull-5 {left: -400px;}
.rt-pull-6 {left: -480px;}
.rt-pull-7 {left: -560px;}
.rt-pull-8 {left: -640px;}
.rt-pull-9 {left: -720px;}
.rt-pull-10 {left: -800px;}
.rt-pull-11 {left: -880px;}
.rt-prefix-1 {padding-left: 80px;}
.rt-prefix-2 {padding-left: 160px;}
.rt-prefix-3 {padding-left: 240px;}
.rt-prefix-4 {padding-left: 320px;}
.rt-prefix-5 {padding-left: 400px;}
.rt-prefix-6 {padding-left: 480px;}
.rt-prefix-7 {padding-left: 560px;}
.rt-prefix-8 {padding-left: 640px;}
.rt-prefix-9 {padding-left: 720px;}
.rt-prefix-10 {padding-left: 800px;}
.rt-prefix-11 {padding-left: 880px;}
}
2.: I change the rokmediaqueries.js in templates/rt_cerulean/js folder from:
queries: [
'(min-width: 1315px)',
'(min-width: 1075px) and (max-width: 1314px)',
'(min-width: 883px) and (max-width: 1074px)',
'(min-width: 595px) and (max-width: 882px)',
'(max-width: 594px)'
]
to the following:
queries: [
'(min-width: 2052px)',
'(min-width: 1420px) and (max-width: 1899px)',
'(min-width: 1075px) and (max-width: 1419px)',
'(min-width: 883px) and (max-width: 1074px)',
'(min-width: 595px) and (max-width: 882px)',
'(max-width: 594px)'
]
3.: I change the width from body-angle.png from 1265px to 1965px
I think there are some more pics to change but this Version works already good for me. If there are more major issues with it i will report it. Also i could not get it to work with integrate the changes to my rt_cerulean-custom.css which means i have to overhoul the website after updating it. I also was not able to deal with Hennings grid calculator.
Hope somebody could use this
-
Time to create page: 0.065 seconds