Hello, i am trying to find where i can edit the off-canvas so that it becomes responsive on mobiles.
When i open this joomlabamboo site and my own (!) , on samsung Galacy S2 for instance, the offcanvas opens (the 3d effect works very well), but the width is too big. and the menu on the left gets lost.

In the offcanvas.css, i spotted a recurring 400px value. But that is very obscure to me, not sure which one i should temper with!!
Many thanks

What is the link for your site?

Cheers
Paul

sorry, www.ogunte.com/testjuly
thanks

You are on the right track - it would be a case of adding media queries for the required screen width e.g.

@media (min-width:480px) and (max-width:800px) {
.t3-off-canvas {width:300px;}
.off-canvas-right.off-canvas-effect-7.off-canvas-open .t3-wrapper {
-webkit-transform: translate3d(-300px, 0, 0);
transform: translate3d(-300px, 0, 0);
}
}

Cheers
Paul

Thanks Paul, i am adding this to offcanvas.css or custom.css?

the file you add this to is custom.css

Cheers
Paul

Sadly it is not working on mobile, tried different widths

like
.t3-off-canvas {width:200px;} instead of 300px
or
-webkit-transform: translate3d(-200px, 0, 0);
transform: translate3d(-200px, 0, 0);
instead of
-webkit-transform: translate3d(-300px, 0, 0);
transform: translate3d(-300px, 0, 0);

but no luck..

If I delete all your code in the custom.css bar my above code it works so it looks like you have errors

Cheers
Paul

thanks, i removed all the other codes (one of them supposed to solve my top4 sizing issue;-))

but nothing changed! I cleared history and cache on my phone, no change whatsover, (Galaxy S2) in portrait.

The left hand side is truncated. (5 characters)

We are talking about the same custom.css ???
located here testjuly/templates/lifestyle2/css/custom.css

Thanks

It works for me when I resize the screen and then refresh

I am working on the browser as i don't have that phone

with the breakpoint its between 800px and 480px so if the device is outside of these variables it won't show

my desktop showing the off canvas being 300px at 799px screen width

i can see, and i have that perfectly when i make my desktop screen smaller.
But my phone's screen width is 480 max...

Right so adjust the mix and max values as required

Cheers
Paul

My last option is to align the menu items on the right, maybe?

Not exactly sure what you mean - with the media queries they should adjust as required once the right screen width values are added

Cheers

Hello there,

Same problem here with an Iphone.

Using this style into custom.css


As you can see the offcanvas (added on the right, maybe I need to test on the left ??) is not starting from the "very" right so in landscape mode, you have the background of the site that appears...



... and in portrait mode, it's too large too fit...

Hi guys,

Looks liek I missed somethign when checking the theme. You can control the width of the offcanvas setting in the Theme Magic panel rather than editing it directly.
Ill look at getting a fix for the offcanvas width on small screens.
Thanks

Hi Agussol!

The fix works for me
@media (min-width:480px) and (max-width:800px) {
.t3-off-canvas {width:300px;}
.off-canvas-right.off-canvas-effect-7.off-canvas-open .t3-wrapper {
-webkit-transform: translate3d(-300px, 0, 0);
transform: translate3d(-300px, 0, 0);
}
}

BUT
Istead of putting max-width800px
@media (min-width:480px) and (max-width:800px) {

i have put (min-width:200px) and (max-width:480px)

because that's the maximum width of my galaxys2.

SO it works now!!!
s

Paul's fix above works but you need to out your own phone's max width.
Thememagic is very sluggish and i can't make any change in there for whatever i need.... ;-(

Right - the speed of thememagic can be due to the hosting setup

Cheers
Paul