How to Add Media Querie in Your Website

Add Media Querie

HTML Code

Add Media Querie As for the HTML we will be using the HTML5 doctype as we will be using HTML5 tags.  Also we want to make sure we have our view port tags in there as well.  This is what the code will look like:

Now it’s time for the Media Queries. For this basic example, I’m only going to layout the nav to respond to 640px or lower. The idea here is to have the nav menu disappear and the menu-icon appear in its place. Then once the menu-icon is selected or hovered, the nav menu will reappear below the menu-icon in a list order. Also we want to position the header absolute as we might need to scroll the navigation options. Here is our code:

/*MEDIA QUERY*/
@media only screen and (max-width : 640px) {
header {
position: absolute; }
#menu-icon { display:inline-block; }
nav ul, nav:active ul {
display: none; position: absolute; padding: 20px; background: #333333; border: 4px solid #ccc; right: 10px; top: 30px; width: 40%; border-radius: 3px 0 3px 3px; }
nav li {
text-align: center; width: 100%; padding: 10px 0; margin: 0; }
nav:hover ul {
display: block; }

Add Media Querie

how to create a website in html

Leave a Reply

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