Avatar of Canders_12
Canders_12
Flag for United Kingdom of Great Britain and Northern Ireland asked on

JQuery & CSS - Screen Size Play Nicely

Hello all,

I would like to have a button that matches the width of the screen if on a mobile.  Else a maximum of 500px.

I have used the following code but it looks daft on phones that have stupidly tight pixels, such as the iPhone retina display:

.button, .button:visited {
      width: 100%;
      max-width:500px;
}

So, can I use jQuery to establish if it is a mobile device.  If it is then have it fill the screen, else pop it at 500px.

Any help to achieve this would be greatly appreciated.  Many thanks, Alan.
CSSjQueryJavaScript

Avatar of undefined
Last Comment
Canders_12

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
LZ1

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Canders_12

ASKER
Could you explain what each part is doing if possible?

Many thanks, Alan.
LZ1

Sure. The @media part is defining what media we're going to be using, in this one the screen.  min-device-width is grabbing the minimum width the screen is able to use, in this case 480px.  

Next we define our button's width using regular CSS.

Make sense?
Kyle Hamilton

just a note: retina display is 960×640 pixels.

You still might still need a javascript or server side sniffer. Not all mobile devices have js, but I don't know what ones you're targeting... so it might still be a satisfactory solution.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
Canders_12

ASKER
lz1:

not sure i do :/ but i will look it up in the morning. thanks for truing to educate the idiot lol

 kozaiwaniec:

appreciated the heads up.
LZ1

Let us know when your back and let us know what your not getting.
Canders_12

ASKER
got it :)

many thanks
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.