By Daniel Jones
When I first started out in WordPress it was almost impossible for me to figure out how to create a responsive CSS code. I saw that it was linked up to many different CSS files and I was unsure as to where to put my code and how to do it etc.
I am going to quickly sum up some easy ways of doing it.
Firstly you need an area to be inputting custom CSS, this can be by creating a child theme or simply using a plug in for custom CSS. For more information on child themes please go to: http://codex.wordpress.org/Child_Themes
Now that you have a place to put your custom CSS you will want to input the following code:
/*——media——–*/
@media screen and (max-width: 600px) {
}
This means that the CSS inside those brackets will affect only the object when the screen width is below 600px. I have also included a CSS comment so that you can find it easily when you are looking back, though it is good practice to place this at the bottom of your CSS code.
And that is it! As simple as that! The only other thing you may find resourceful is the use of the “!important;” code that is often needed here. This will over write any other conflicting rule.
Here is a further example of a media query for the background color.
/*——media——–*/
@media screen and (max-width: 600px) {
Body {background-color: #000!important;}
}
I hope you have found this helpful, please share it with your friends if you did.