« Web, HTML, Tech Forum

Don't forget about phones!

Hey Spacefolks,


I know we're living like it's 2005, but let's not forget that it's 2021! When you're crafting your CSS, make sure you use media queries to target mobile devices or smaller screens. For my profile, I have a media query set for 600px or smaller, which should cover most use cases.

@media only screen and (max-width: 600px){
.class { thing }
}

This will make things nicer for when people are on their phones checking out your profile!


Report Topic

7 Replies

Sort Replies:

Reply by AUTUMN R♡SE

posted

I just saw this and it’s so nice,

because I do use strictly my phone
until my computer is sent to me in Vegas 
from indiana. :(


Report Reply

Reply by Vermilion Witch

posted

Thank you! I'm going crazy trying to edit my profile... I can't find codes that work and seeing it as basic make me sick


Report Reply

Reply by Ben

posted

I try to design

my spacepage for all comers
but always fall short


Report Reply

Reply by Echigo420

posted

Thank you, this is so useful and aesthetic. 


Report Reply

Reply by Char Dee

posted

Hello there, I'm sure it's right in front of my but my brain isn't working at the moment. How do I use this? 
 

@media only screen and (max-width: 600px){
.class { thing }
}


What goes in the "thing" area? right now My mobile view is most screwy with the top Nav links and the image I put in there. Mostly in profile view while in mobile. 

landscape renders things better...but...yeah, I would love to make my Spacehey more mobile friendly. 

:) 


Report Reply

Reply by Boogley

posted

Hi, yes, I would also like to know what to enter for "thing" in this code


Thanks c:


Report Reply

Reply by Cory

posted

So you’re going to replace .class { thing } (the whole thing) with any CSS you want to target specifically for mobile. There is no .class targeted in a SpaceHey profile—it’s just a sample.


Report Reply