.welcome-logo Logic


Hello out there!

Is there any way I can put some if, then logic for detecting screen resolution and resizing? I got the welcome logo adjusted to look perfect on iPhone and then went to check on the iPad and the logo was far too big to be seen fully. I added another set of code for .welcome-logo with the correct size to look great on iPad, but it only detects the second of the two:

@media screen and (max-width: 600px) {
.welcome-logo {
max-width: 125px !important;

@media screen and (max-width: 1536px) {
.welcome-logo {
max-width: 380px !important;

The first section works great on iPhone and second is perfect for iPad but as far as I can tell it’s one or the other and I don’t know if it’s possible to put some logic in that would allow it to choose between them.

Thanks in advance!



Moving the first one after the second should probably do it.


So simple! Wow. Thanks so much. Looks great now!