When you will see your website in different devices, may you don’t see properly. It’s not a programmatically problem. If you don’t know what is responsive, you can mistake this with your website. Many people do this mistake. But when you will be known about responsiveness, I hope you will be aware about your website design. In this article, I will tell you how to make website responsive design using CSS.
What is responsiveness?
If you want to responsive your designed website, you have to know what is responsiveness. Suppose, you have a website. When you’re seeing your website in computer display, you can see a image 50% width of whole display. But when you’re seeing in mobile, this width is too much small. That’s not understandable. If you want, you can see this image 100% of whole display. This is called responsiveness. I hope you can understand what is responsiveness.
How to do responsive?
Now, you have known what is responsiveness. If you want to do responsive your website, you have to put a meta tag with your HTML code. So that, browser can compare your device with between website width. You can put following meta tag in your HTML file where you have putted others meta tags. Note that, you have to put this meta tag inside HTML head tag.
<meta name="viewport" content="width=device-width, initial-scale=1" />By above code, you have defined website width count as per device width. If you don’t add this code inside HTML head tag, you can’t do responsive your website properly. When you have added above code in your HTML now you’re all set to do your website responsive.
Add CSS code.
Now, you have put some CSS code in your stylesheet. Normally, default stylesheet is style.css. If you have different named stylesheet don’t worry about it. Just write following code in your stylesheet.
@media all and (max-width: 768px){
}Now you can select your HTML tags inside that curly brace. May you can’t understand above codes. Don’t worry. I will tell you more about above codes. This is the CSS media queries codes. This code will execute when your device width lass than 768px. When your device width will be more than 768px this code will be not executable.
If you want to show your image width 100% when device will be 768px, you can use following example code.
img {width: 50%;}
@media all and (max-width: 768px){
img { width: 100%;}
}You can do responsive your website every element. So that, users can feel attraction for your design.
I hope you can understand about how to make your website responsive. You can read my another article about How to create triangle on HTML Template.