3 media query issues
-
-
- Ali Samii
- Elite Rocketeer
- Posts: 629
- Thanks: 2
-
When I resize the browser or view the site on a mobile device, there are two issues I need solved.
The site URL: betelec.ergonomiq.net
1. The menu dropdown button is not working...or actually, more accurate would be to say it's z-index is incorrect and so it is unclickable. But, I can't find where I would need to modify the LESS to change its z-index.
2. When the viewport is narrow, the Sidebar-A position is below the the mainbody. I would like to have it above the mainbody. How do I change the position. See screenshot below.
This image is hidden for guests.
Please log in or register to see it.
See betelec.ergonomiq.net/societe/qui-sommes-nous
3. The footer has some funky alignment issues happening. The link-back to "Place Neuve" on the left is vertically above the copyright info which is vertically above the to-top scroller. They all need to be on the same line...so to speak. Can't figure out what needs to be changed in the mediaqueries.less file. See the screenshot.
This image is hidden for guests.
Please log in or register to see it.
I know the fat-footer is not displaying correctly, but that isn't an issue as that will be hidden at a certain viewport size when the formatting and coding is complete. - Thank you.
Ali Samii
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
for 1 and 3
@media only screen and (max-width: 767px) {
#rt-copyright div.rt-container [class*="rt-grid"]
{width: 33%!important; float: left!important; overflow: hidden;}
.gf-menu-toggle {z-index: 9999;}
}
for 2
Not possible this way. I suggest to hide the sidebar and show content-top via responsive support classes ...
You need to add a few things for the mobile drop down
-
-
-
- Ali Samii
- Elite Rocketeer
- Posts: 629
- Thanks: 2
-
Hi Henning,
1 and 3 are both handled with the same CSS?
You also said I need to add a few things for the mobile drop-down...but you didn't give me a clue as to what. Can you lift the veil a little bit? Bitteschön??
Thanks, - Thank you.
Ali Samii
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
@media only screen and (max-width: 767px) {
#rt-copyright div.rt-container [class*="rt-grid"]
{width: 33%!important; float: left!important; overflow: hidden;}
.gf-menu-toggle {z-index: 9999;}
}
... two rules
The first takes care of the footer the other one of the z-index of the toggle.
To see what I mean just add that to the css. You will see that you need to work on the position of the drop down. I'm sure you can solve that on your own.
-
-
-
- Ali Samii
- Elite Rocketeer
- Posts: 629
- Thanks: 2
-
Hi Henning,
One problem with this code is that it assumes a 33% width for the 3 divs.
#rt-copyright div.rt-container [class*="rt-grid"] {width: 33%!important; float: left!important; overflow: hidden;}
I tried modifying it as follows:
#rt-copyright { div.rt-container [class*="rt-grid"] { float: left !important; overflow: hidden; #branding { width: 20% !important; } #copyright { width: 60% !important; margin: 0; padding: 0; } #totop-scroller { width: 20% !important; } } }
But then things get messed up again.
How can I have the #branding and #totop-scroller to be set at width: 20%; and #copyright at width:60%;?
Regarding the left green space, I have a question.
Each page has a separate module published in that space.
If I want to have the module published in sidebar-a for a desktop and tablet, but published in content-top-a as you suggest for mobile, is there a way to do that without creating 2 copies of each module? - Thank you.
Ali Samii
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
Sorry Ali,
your code is nonsense.
Look at html you want to style first.
You need to change the elements that have grid classes.
Just check that again ...
You can use .rt-alpha and .rt-omega or just :nth-child ...
-
-
-
- Ali Samii
- Elite Rocketeer
- Posts: 629
- Thanks: 2
-
Hi Henning:
:cheesy:
No need to say sorry. Sometimes, I take a grain of sand and then call it a mountain and then try to break it down...and of course, that is nonsense! LOL.
I'll take a look again and come back if my brain has decided to go on strike!
- Thank you.
Ali Samii
-
Time to create page: 0.063 seconds