Suggestion: css fix for mobile device

[inghippo]

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 Expand

@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;}
}

[Lilias]

As an unapproved member, your Elliquiy experience is very limited. Patience is appreciated. :-)

[inghippo]

Absolutly, it's just a suggestion to evaluate.

thanks

[inghippo]

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 Expand


<!--[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.

[Vekseid]

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?

[inghippo]

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 Expand


@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 Expand


<!--[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

[Vekseid]

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.

[inghippo]

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

[Vekseid]

Yeah, I didn't test it properly when I made it. Should be good now. No need for media query sillyness.

[inghippo]

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.