SOLVED custom responsive 12 col. grid with max width 1824px
-
-
- Niels Binder
- Hero Rocketeer
- Posts: 255
- Thanks: 5
-
Hallo.
I am puzzeling to get the cerulean template to view nicely up to screen width of 1920px. Seems to be a hard job for a not so experienced person like me and i appreciate some help:
First, i am not sure if it makes the things by far to complicated if i like to use a 16 grid instead of 12 grid system.
Second, i am not sure which files i should tweak. At the moment i think i would copy the grid-responsive.css from the libraries/gantry/css folder to my templates css folder and modify that. But this file has only a 12 grid so i guess i better not change this to 16 grid.
Third, do i have to change the rt-container as well or only the @media only screen sections ?
Fourth, could i just leave all "as is" and just add a @media only screen and (min-width:1200px) and (max-width: 1919px) section in the "12grid / 1920with" scenario
Please dont get angry. I already read plenty posts here and even in google groups, but cannot conclude from the extracted information
Thanks already to join that topic and kick me on the way - Last Edit: 11 years 4 months ago by Niels Binder.
-
-
-
- Who?
- Preeminent Rocketeer
- Posts: 25562
- Thanks: 613
- Joomla freelancer
-
I have to admit that I don't understand this thread since both me and @Zambego member answered the same question here, clearly explaining what needs to be done
www.rockettheme.com/forum/index.php?f=48...84258&rb_v=viewtopic - Check my services at: Mihha-Vision
-
-
-
- Niels Binder
- Hero Rocketeer
- Posts: 255
- Thanks: 5
-
Sorry if i irritate you Igor. I read this and plenty other threads to this topic but i cant answer my questions above.
It is not clear to me. I am not a programmer and my knowledge is limited. I really give my best; if i understood how to, i wont ask.
The mentioned thread seems to be for a 12 grid system. Is it also valid for a 16 grid ???
-
-
-
- Who?
- Preeminent Rocketeer
- Posts: 25562
- Thanks: 613
- Joomla freelancer
-
No, it is not valid for 16 grid. I am really sorry but I don't know how else can we help you if you don't even try to apply changes proposed in those threads. We can't do the web site for you
- Check my services at: Mihha-Vision
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
Personally I think this is a pretty useless thing to do.
But just to show you it's possible.
1. Download the zip I attached. Unpack it.
Drop the file grid-custom.less into the less folder of your template.
2. open global.less in your less folder and add the very end.
// extra-grid
@import "grid-custom.less"
3. open rokmediaqueries,js in the js folder of your template.
find
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)'
]
and change it to
queries: [
'(min-width: 1920px)',
'(min-width: 1075px) and (max-width: 1919px)',
'(min-width: 883px) and (max-width: 1074px)',
'(min-width: 595px) and (max-width: 882px)',
'(max-width: 594px)'
]
4. go to the template settings and clear the less cache
5. clear your browser cache.
Note: You will also have to solve some issues in css (I won't help you with that)
You will also have to create some proper image-files for some of the backgrounds like
body-angle.png because the ones in the template are too small for this (I won't help you with that). Wich leads to my last note. Providing background/slideshow images of that size is pretty useless because it will make your site slow slow slow ... so all of the stuff above is ... infact useless.
A personal advice. Start learning by going small steps.
Listen to what more experienced members tell you.
Don't try to fly to the moon ... with a bike.
-
-
-
- David Goode
- Preeminent Rocketeer
- Posts: 17058
- Thanks: 890
- Web Designer and Host
-
The biggest problem you will have when exceeding recommended sizes is that the actual content becomes a nightmare to control across all variants.
What looks like 3 lines of text on your 1920px screen will be 30 lines on a mobile display. On a pc people are happy to scroll as most mice tend to have a scroll function these days, similar to swipe on a phone.
As it stands most people still use responsive but do not edit the content to display or hide the text and images as we do in the demos. Having extra wide templates will just create even more problems for the majority of users.
And just to highlight a simple fact that the average person reads at the rate of 240 words per minute because the human eye can only refocus 4 times per second, and most of us read one word at a time. This means that it is natural for most western cultures to read left to right while scanning downwards. I know this because I teach people to speed read in business environments upto 800 words per minute while keeping understanding and retention levels at least as high as their previously slower reading speed.
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
-
Hi David.
I start to understand that its not for every content a good thing. I start from zero so i think i will find proper dimensions for each of my text in every situation. That this is a real challenge or nightmare - yes i agree -.
In my mind i think its worth it for my site, we will see when its ready.
-
-
-
- Niels Binder
- Hero Rocketeer
- Posts: 255
- Thanks: 5
-
Thanks Henning.
I applied it the way you wrote. It seems the same problem like on my first tweaks in the template custom css file. There is no responsiveness from 1920 to 1315 (or 1075 ?).
For the rest it looks already good.
One effect of the missing step(s) is that at a standard 1920 screen resolution the Browser makes a horizontal scroll ... - Last Edit: 11 years 4 months ago by Niels Binder.
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
- well I could add another step between 1315 and 1920 ... but that is really just an academic question. I don't think it makes sense. My less-file gives yo a tool to calculate other grid sizes but that's really all I want to contribute here.
-
-
-
- Niels Binder
- Hero Rocketeer
- Posts: 255
- Thanks: 5
- Henning i was satisfied if it works on a 1920px Monitor. So if you could add one step in the middle or make the maximum to 1824px i hope i can go ahead and let you regenerate.
-
Time to create page: 0.063 seconds