SOLVED A specific layout for each breakpoints
-
-
- Laurent BRIERE
- Rocketeer
- Posts: 76
- Thanks: 3
-
I still know that we can use css classes like visible-phone, hidden-phone...
responsive grid system
... and thanks for that
But... I need to have in the same section
- 1 raw with modules positions and specific widths (pos-1 : 25% / pos-2 : 50% / pos-3 : 25%) used in large screens
- 1 raw with modules positions (Same names) but different widths (pos-1 : 10% / pos-2 : 60% / pos-3 : 30%) used for desktop screens
How can I manage that ? (a kind of assignment / breakpoint) (I wanted to use Nonumber AdvanceTemplate manager, but I thinks it does not work with Gantry - Or will Peter release a new version for that
for G5 ?)
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
Why not stick with just mediaqueries?
/** Tablet Modes **/ @media only screen and (min-width: 48rem) and (max-width: 60rem) { pos-1 {width: 25%;} pos-2 {width: 50%;} pos-3 {width: 25%;} } /** Small Screen Mobile Modes **/ @media only screen and (max-width: 30rem) { pos-1 {width: 10%;} pos-2 {width: 60%;} pos-3 {width: 30%;} }
-
-
-
- Laurent BRIERE
- Rocketeer
- Posts: 76
- Thanks: 3
-
Thanks but where do you write that code ? In a custom.scss file ?
I am not sure but did you understand that for instance "pos-1" was for me the name of the position and not a suffix class ?
If it is right so it is great that we can use name position in scss code. Where did find this information ? It could be so useful for G5 users to know the power of this scss files
?
I tryed that :but I did not work@include breakpoint(large-desktop-range) { sidebar-a {width: 10%;} sidebar-a {width: 37%;} pagecontent {width: 53%;} }
- Last Edit: 9 years 8 months ago by Laurent BRIERE.
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
Laurent BRIERE wrote:
Thanks but where do you write that code ? In a custom.scss file ?
I am not sure but did you understand that for instance "pos-1" was for me the name of the position and not a suffix class ?
If it is right so it is great that we can use name position in scss code. Where did find this information ? It could be so useful for G5 users to know the power of this scss files ?
I tryed that :but I did not work@include breakpoint(large-desktop-range) { sidebar-a {width: 10%;} sidebar-a {width: 37%;} pagecontent {width: 53%;} }
You can't have two with the same name. Use Chrome Developer Tools to get the actual names from the template output.
To add these mediaqueries, in your [JOOMLA-ROOT]/templates/rt_templateName/custom/scss/custom.scss (this is a link) file add your code here.
Yes I understood there module position's. You will need Chrome Developer Tools OR FireFox Developer Tool OR FireBug for Firefox to see the exact names of the generated module position's names in the HTML output. These would be the actual template module position names for your pos1, pos2 and pos3.
Once you have the actual names from the HTML output you would use them in the mediaqueries. -
The following users have thanked you: Laurent BRIERE
-
-
-
- Laurent BRIERE
- Rocketeer
- Posts: 76
- Thanks: 3
-
OK I understood... And it works - Thanks a lot!
<div class="g-grid"> <div id="sidebara" class="g-block size-23"></div> <div id="zonearticle" class="g-block size-52"></div> <div id="sidebarb" class="g-block size-25"></div> </div>@include breakpoint(large-desktop-range) { #sidebara {width: 10%;flex : 0 1 10%;} #sidebarb {width: 37%;flex : 0 1 37%;} #zonearticle {width: 53%;flex : 0 1 53%;} } - Last Edit: 9 years 8 months ago by Laurent BRIERE.
-
-
-
- Laurent BRIERE
- Rocketeer
- Posts: 76
- Thanks: 3
- How do you change the statut to SOLVED please ?
-
-
-
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
-
Laurent BRIERE wrote:
How do you change the statut to SOLVED please ?
To mark this issue as Solved, please change the Topic icon to a Checkmark and add [SOLVED] to the beginning of your Title FIRST post of the Topic
This image is hidden for guests.
Please log in or register to see it.
but I'll do it for you
-
Time to create page: 0.068 seconds