Support Forum

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

Different css rules and layout for smartphone

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Hi everyone!

I'm trying to customize the layout of the website www.fumatto.com for smartphone...
In the desktop mode my customer asked me for some edits, like the sidebar always showed with text, so I modified the custom.css with this:

#sidebar {
max-width: 160px !important;
box-shadow: none;
background-color:#FFF !important;
}


.background-div {padding-left:160px}


.background-div .moduletable, .base .moduletable {
padding-left: 160px;

}

but I have problems with mobile layout....

My customer wants to keep the sidebar open but smaller (small text small buttons) but i have no controls in administrator for mobile layouts...i should write some code in css just for mobile like:

@media only screen and (orientation:portrait) and (min-width:150px) {
something....
}

how should i do?


thank you :)
  • Marco Formisano's Avatar
  • Marco Formisano
  • 3 Month Basic
  • 116 posts
  • 1 Thanks
  • Karma: 1
The administrator has disabled public write access.
Not sure its that easy

Are you wanting the text in the menu links to display?

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
sidebar not collapsed, text showed and a static image instead of fullscreen video (because resizing that exist does not work well)
  • Marco Formisano's Avatar
  • Marco Formisano
  • 3 Month Basic
  • 116 posts
  • 1 Thanks
  • Karma: 1
The administrator has disabled public write access.
I'll ask a developer but I think this be beyond on our level of support I'm afraid

I think this would require the purchase of a support block if its possible

I'll get back to you but given the holidays it will probably be next week

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
hiii paul, do we got some news? can we do some test?
I don't think it is that hard to do, just if "mobile" don't collapse sidebar and show "static image.jpg" as background...
  • Marco Formisano's Avatar
  • Marco Formisano
  • 3 Month Basic
  • 116 posts
  • 1 Thanks
  • Karma: 1
The administrator has disabled public write access.
Hi

Unfortunately given the holidays and illness (me) we are a little behind

I will try and ask tonight but I think this is more complicated than just css

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
ok no problem think about your health and let me know when you can :)
  • Marco Formisano's Avatar
  • Marco Formisano
  • 3 Month Basic
  • 116 posts
  • 1 Thanks
  • Karma: 1
The administrator has disabled public write access.
I've added this to our task list so you should here back by Friday
As Anthony is away at the moment

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
no problem, really, take your time :)
  • Marco Formisano's Avatar
  • Marco Formisano
  • 3 Month Basic
  • 116 posts
  • 1 Thanks
  • Karma: 1
The administrator has disabled public write access.
Thanks
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Hi Marco,
In the template settings you can add 0 for the collapse width. This means that the sidebar will never collapse if you also ensure that collapse is disabled for all of the panels.

Then to target the links in the sidebar you can do something like this:

@media screen and (max-width:620px) {
#sidebar li a {font-size:90%}
}

Obviously change the max width value to where you want that to kick in and the font-size to the value that makes sense for your design.

Does that do what you need?
Thanks
  • Anthony Olsen's Avatar
  • Anthony Olsen
  • LIfetime Developer - Big Bamboo
  • 23925 posts
  • 788 Thanks
  • Karma: 433
The administrator has disabled public write access.
Hi Anthony,

this is EXACTLY what I asked for!
nice!

To fit better and to get best proportions, I modified as follow:

@media screen and (max-width:620px) {
#sidebar li a {font-size:100%}
#sidebar {
max-width: 100px !important;
}
.background-div {padding-left:100px}
}

because the background was shifted to the right of some px. now looks well.

The last two things are (i will attach two screenshots from my iphone6):

Why the video background have two black bars up and down ? and it does not play too. Can we change the background with a static image in a specific folder ? (i'm talking always as mobile user)

and why the contact fields looks justified on the right? can we move some % on the left?
Attachments:
  • Marco Formisano's Avatar
  • Marco Formisano
  • 3 Month Basic
  • 116 posts
  • 1 Thanks
  • Karma: 1
Last Edit: 4 years 6 months ago by Marco Formisano.
The administrator has disabled public write access.
Hi Marco,

I don't have access to that device - do you see the same issues on the demo site version?

bambootheme.com/showcase/mar14/

Cheers
Paul

Cheers
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
You can resize the window of your browser to Simulate a Mobile device, take a look to the screenshot took with firefox now on my pc

2015-04-1314_05_46-Fumatto-Home.png
  • Marco Formisano's Avatar
  • Marco Formisano
  • 3 Month Basic
  • 116 posts
  • 1 Thanks
  • Karma: 1
The administrator has disabled public write access.
I'm wondering if the video itself might be the issue

Have you tried using the video from the demo site?



Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
the demo site has the same problem, iI tried resizing the browser window.

It has the two black bars up and down, but it is less disturbing because the video it's not white as mine!
mine is white, done just for the website.

Anyway I don't really care about the video on mobile, I can just put there a static image, even to save mobile data traffic.
Attachments:
  • Marco Formisano's Avatar
  • Marco Formisano
  • 3 Month Basic
  • 116 posts
  • 1 Thanks
  • Karma: 1
The administrator has disabled public write access.
The site seems to be offline at the moment
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
it was online for me, it is just you?

if you have problem you can check it here
www.downforeveryoneorjustme.com

maybe your IP was blocked for some reason, if you can't see the website again, please let me know your public IP I will put in whitelist
  • Marco Formisano's Avatar
  • Marco Formisano
  • 3 Month Basic
  • 116 posts
  • 1 Thanks
  • Karma: 1
The administrator has disabled public write access.
I'll check with the team as I still get "This web page is not available"
See if they have problems with it

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
I guess your IP was banned for some reason, I can ask to unblock but I need to know what it is.
If you prefer you can send me a private message or an email.
  • Marco Formisano's Avatar
  • Marco Formisano
  • 3 Month Basic
  • 116 posts
  • 1 Thanks
  • Karma: 1
The administrator has disabled public write access.

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers