You are either not logged in or not registered with our community. Click here to register.
 
December 09, 2016, 07:23:11 PM

Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length

Click here if you are having problems.
Default Wide Screen Beige Lilac Rainbow Black & Blue October Send us your theme!

Hark!  The Herald!
Holiday Issue 2016

Wiki Blogs Dicebot

Author Topic: Suggestion: css fix for mobile device  (Read 335 times)

0 Members and 1 Guest are viewing this topic.

Offline inghippoTopic starter

Suggestion: css fix for mobile device
« on: April 16, 2014, 11:34:20 AM »
I've checked E on my smartphone and I keep getting the top link "are you approved yet?" ecc ecc and go on menu making difficult to navigate or login.
I think this can be fixed with few line of css in the head tag of every page.

I leave here the css code:

Code: [Select]
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
a.elliquiysupernotice, a.elliquiysupernoticefloat{height:auto !important;}
a.elliquiy_topmenu {display:block;}
}

Offline Lilias

Re: Suggestion: css fix for mobile device
« Reply #1 on: April 16, 2014, 11:36:41 AM »
As an unapproved member, your Elliquiy experience is very limited. Patience is appreciated. :-)

Offline inghippoTopic starter

Re: Suggestion: css fix for mobile device
« Reply #2 on: April 16, 2014, 11:40:04 AM »
Absolutly, it's just a suggestion to evaluate.

thanks

Offline inghippoTopic starter

Re: Suggestion: css fix for mobile device
« Reply #3 on: April 16, 2014, 11:46:50 AM »
Forgot a piece.
for internet explorer 7 and less users it's better to rewite the media query rules in specific way with something like:

Code: [Select]
<!--[if lte IE 7]>
<style>
a.elliquiysupernotice, a.elliquiysupernoticefloat{height:24px !important;}
a.elliquiy_topmenu {display:inline;}
</style>
<![endif]-->

It's just a suggestion, the whole site is working well, it's a minor fix to improve compatibility with mobile device.

Thanks for all the hard work.


Online Vekseid

Re: Suggestion: css fix for mobile device
« Reply #4 on: April 16, 2014, 10:28:49 PM »
The overwhelming majority of IE6 users are spammers, and it did work fine in IE7 when I tested it.

Can see about the media query, though - what device are you using?

Offline inghippoTopic starter

Re: Suggestion: css fix for mobile device
« Reply #5 on: April 17, 2014, 03:21:15 AM »
Good morning,

The issue is not about a specific browser but about the width of the window where you see the website. let me me explain.
On smartphones the width of the window is normally 320px (portrait mode) or 480px (landscape mode).
To simulate this problem you can try to scale your browser window at 320px or 480px of width to get an idea of how it will be on smartphone device.

As fix I was suggesting to use css media query, is a way to tell a browes a style based on the browser's window width:

Code: [Select]
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
a.elliquiysupernotice, a.elliquiysupernoticefloat{height:auto !important;}
a.elliquiy_topmenu {display:block;}
}
 

adding this at the of the style in the head tag in every page will make a better experience for people using smartphone.

What about ie7?

Ie7 have no support for media query as these so he will apply anyway this style on desktop.
So, if you add the previous code to css you will see some issue on ie7, to solve you can just add this.

Code: [Select]
<!--[if lte IE 7]>
<style>
a.elliquiysupernotice, a.elliquiysupernoticefloat{height:24px !important;}
a.elliquiy_topmenu {display:inline;}
</style>
<![endif]-->

In this way you've a good experience on mobile and retrocompatibility with ie7.
Like you said ie6 is death with windows xp so there's no reason to worry about that anyway the sintax cover ie7 and all the previous version (lte IE 7).

Some resources about css media query:
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
and about conditional comments for ie
http://www.quirksmode.org/css/condcom.html




Online Vekseid

Re: Suggestion: css fix for mobile device
« Reply #6 on: April 17, 2014, 03:24:43 AM »
Good morning,

The issue is not about a specific browser but about the width of the window where you see the website. let me me explain.
On smartphones the width of the window is normally 320px (portrait mode) or 480px (landscape mode).

On your smartphone, maybe. On mine it isn't, that's why I want to know what you are using.

Offline inghippoTopic starter

Re: Suggestion: css fix for mobile device
« Reply #7 on: April 17, 2014, 03:32:18 AM »
Ok, probably I've a screen smaller then yours, If can check on desktop you'll will see something like this.
It a screenshot with firefox but I got the same situation on smartphone and othe browser (for ie I test with 9+ version, 8 is death to me).
https://drive.google.com/file/d/0B1QsAdPjnFqedjFYdV9XcFd4NXM/edit?usp=sharing

Online Vekseid

Re: Suggestion: css fix for mobile device
« Reply #8 on: April 17, 2014, 03:33:40 AM »
Yeah, I didn't test it properly when I made it. Should be good now. No need for media query sillyness.

Offline inghippoTopic starter

Re: Suggestion: css fix for mobile device
« Reply #9 on: April 17, 2014, 03:45:08 AM »
Yep I checked and is fine now, thank you.

Just for info, 90% of website works fine on mobile, using css media query would improve with some minor fix the layout.
If in the future you think is a good a idea to add something I'm avaiable for giving an help if you want.
I do responsive layout all day as a job maybe I can save you some time.

Thank you for your time.