Media Queries and Platform 5

Media queries, a phrase that scares the hell out of some developers.

When in actuality there are pretty easy to understand. In my designs I tend to use at least 2 sets of media queries in every site I  design. The media queries job is to tell the browser what to do based on the screen size.

A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color.  For example this media query tells the browser to make the h1 color red if the screen size is greater than 900px.

/*desktop styles here*/
@media (min-width: 900px) {
  h1 {
    color:red;
  }
}

Media queries use 2 conditional statements to work their magic and they are min-width and max-width. With these two statements included in the media query make it is possible to have a totally different homepage based on the size of the device. So here is a brief explanation of what a media query is telling the browser.

@media (min-width: 768px)  {...}

Here's what that actually means:

"If [device width] is greater than or equal to [specified #], then do {...}"

So if the actual "device width" is less than 768px  this condition will return false and all the styles you have under this media query will not display on screen smaller than 768px so in other words mobile devices.

@media (max-width: 767px)  {...}

"If [device width] is less than or equal to [specified #], then do {...}"

Under this media query is where I tweak the mobile experience. I check for padding issues, fonts that seem to big for mobile or anything else that looks like it doesn't belong.

Keeping mobile first

With PL5 having mobile first built into its core I use a media query for the desktop and another for mobile to catch in weird stuff that I might have screwed up on desktop. Mainly because I love to do a lot of custom styling and I prefer to have complete control over what a section looks like. For example lets take a look at the splash up section. You can not independently style the header font and sub header font so if you change the font size from 100%  to 110% everything changes.

So if I were to target the splash-up h1 and the subtext and style them with css it would throw the mobile first approach out the window. It would look great on desktop and horrible on mobile without the media query. So in order for things to remain mobile friendly I would put all the changes that are being made under my desktop media query. This will allow the any really big font sizes or crazy positioning with margins to return back to their defaults on mobile.

What else can media queries do

Aside from styling changes from desktop to mobile you can also use media queries to hide  sections on mobile if you desire.

Here is an example:

/*mobile styles go here*/
@media (max-width: 767px) {
  #section-id{
   display:none;
}
}

Some other useful links:

Mozilla

w3schools

Wrapping things up we have just touch the basics on media queries and there so much more to learn about them. So be sure to check out the links above to further your knowledge.

About the author

Aires Dagraca, is the creative force behind Xolani Studios, a Web Design Company that focuses on bringing the best web experience to their clients. He also enjoys Gaming, Web Design, Graphic design and family time with his wife and kids. For business inquiries reach out to him here.

A special note from the author.

iHeart pagelines

Leave a Reply

Your email address will not be published. Required fields are marked *


Media Queries and Platform 5

Published on by | Add Comment

Media queries, a phrase that scares the hell out of some developers.

When in actuality there are pretty easy to understand. In my designs I tend to use at least 2 sets of media queries in every site I  design. The media queries job is to tell the browser what to do based on the screen size.

A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color.  For example this media query tells the browser to make the h1 color red if the screen size is greater than 900px.

/*desktop styles here*/
@media (min-width: 900px) {
  h1 {
    color:red;
  }
}

Media queries use 2 conditional statements to work their magic and they are min-width and max-width. With these two statements included in the media query make it is possible to have a totally different homepage based on the size of the device. So here is a brief explanation of what a media query is telling the browser.

@media (min-width: 768px)  {...}

Here's what that actually means:

"If [device width] is greater than or equal to [specified #], then do {...}"

So if the actual "device width" is less than 768px  this condition will return false and all the styles you have under this media query will not display on screen smaller than 768px so in other words mobile devices.

@media (max-width: 767px)  {...}

"If [device width] is less than or equal to [specified #], then do {...}"

Under this media query is where I tweak the mobile experience. I check for padding issues, fonts that seem to big for mobile or anything else that looks like it doesn't belong.

Keeping mobile first

With PL5 having mobile first built into its core I use a media query for the desktop and another for mobile to catch in weird stuff that I might have screwed up on desktop. Mainly because I love to do a lot of custom styling and I prefer to have complete control over what a section looks like. For example lets take a look at the splash up section. You can not independently style the header font and sub header font so if you change the font size from 100%  to 110% everything changes.

So if I were to target the splash-up h1 and the subtext and style them with css it would throw the mobile first approach out the window. It would look great on desktop and horrible on mobile without the media query. So in order for things to remain mobile friendly I would put all the changes that are being made under my desktop media query. This will allow the any really big font sizes or crazy positioning with margins to return back to their defaults on mobile.

What else can media queries do

Aside from styling changes from desktop to mobile you can also use media queries to hide  sections on mobile if you desire.

Here is an example:

/*mobile styles go here*/
@media (max-width: 767px) {
  #section-id{
   display:none;
}
}

Some other useful links:

Mozilla

w3schools

Wrapping things up we have just touch the basics on media queries and there so much more to learn about them. So be sure to check out the links above to further your knowledge.

About the author

Aires Dagraca, is the creative force behind Xolani Studios, a Web Design Company that focuses on bringing the best web experience to their clients. He also enjoys Gaming, Web Design, Graphic design and family time with his wife and kids. For business inquiries reach out to him here.

A special note from the author.

iHeart pagelines

Leave a Reply

Your email address will not be published. Required fields are marked *


Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match