In this article, we’ll be looking at some of my favorite CSS tips that I use for responsive design in my websites and webapps.
Use “%” instead of “px”
When you start learning to code, you may be using pixels for most of your CSS. And that’s good. However, something to realize is that pixels are a defined, or permanent number. When you say: “This image should be 200 px”, it will always be 200 pixels, no matter the screen size. This means that on a smaller screen, the image may be too large, and mess with the flow of the page.
So, instead of using pixels, try this: “This image will be 50% of the width of the div”, so that way, no matter how big or small the div is, the image will always be half of the width. A great CSS tip for responsive design.
Use media queries
When scaling down from desktop size to tablet and then mobile, media queries are what enable you to make that transition. They look like this: @media only screen and (max-width: 950px)
You can use max-width, min-width, whatever you’re trying to do for your project to keep it responsive.
Different colors for headings and body text
When dealing with lots of different information on a page, such as what happens with large websites and apps, many times using two different colors for the heading and body text helps to create contrast and makes the information easier to see. For instance, you could use a dark black for the body text, and a darker gray or light black for the heading.
Overflow:hidden
Many, many times, you’ll realize that there is a horizontal bar on the page, or a white space that you’re not sure where it came from. The best thing to do is use your Devtools to solve the problem, but many times, by using overflow:hidden, you’re able to hide the overflow of content from the website visitor to create a nice and clean responsive design.
So, these are some simple CSS tips for responsive design that you’ll want to keep in mind.
Are you a new web developer and looking for a portfolio? PremiereGoodsStudio has built some fresh new portfolio templates for you! Check them out here:
