Tips to make your website responsive
1- Create a media query
Media query change the presentation of content base of visible area of website.
Media query consist of media type, if media type matches the type of device the document displayed on, the styles are applied.
There is no limitation for styles in media query, you can have as many selectors and styles as you want.
Example :
@media (max-width: 100px) { /* CSS Rules */ }
@media (min-height: 350px) { /* CSS Rules */ }
@media (max-height: 500px) {/* CSS Rules */}
@media (min-width: 30px) {/* CSS Rules */}There are four different type of condition that could use.
You will write them inside opening and closing tags of styles like bellow
<style>p {font-size: 20px;}@media (max-height: 800px){p {font-size: 10px}}</style>
In above example, if any device does not match the height less than 800px, the styles inside the @media (max-height: 800px){} will not be applied. otherwise the styles inside media will overwrite the above styles.
If we have two selector inside style tags and change one of these styles base of any condition in media query, there is to cases
first: if doesn’t match the condition. it will never apply the styles in block of media query
second: if match the condition it will overwrite the styles for selectors that are repeated in media query block again. like this example
<style>p {font-size: 20px;}h1 {
font-size: 30px;}@media (max-height: 800px){p {font-size: 10px}}</style>
if match the condition, only the font-size of p will be overwritten. The styles for h1 still are the same.
2- Make an image responsive
All you need to make an image responsive in web is to set the width to 100% and the height to auto.
img {
max-width: 100%;
height: auto;
}max-width of 100% will make sure that image is never wider than its own container width and height of auto hold the image as its original height and aspect ratio
3- Make typography responsive
To make texts responsive try to use from Viewport units instead of px or em. Viewport units are like percentage. Viewport units are relative to viewport dimensions(width and height) of device and percentage are relative to size of parent container element.
Four different type of viewport units
1- vw(viewport width) 20vw means 20 percent of viewport width
2- vh(viewport height)10vh means 10 percent of viewport height
3-vmin(viewport smaller dimension) 50vmin means 50 percent of smaller dimension(smaller dimension means width or height which one is smaller)
4-vmax (viewport bigger dimension) 15vmax means 15 percent of bigger dimension(height or width)
I am excited to reply you questions. My DM is open for every one.
