Welcome back to our blog as you know my name is Chris from Equalize Designz, today I'm going to show how to create a responsive web page. In the last post I showed how to create a web page using HTML and CSS, in this post i will show how to make that same web page responsive. With this post i have a YouTube video embedded which will show you step by step on how to make it responsive. Towards the end of the video I screen record my phone and actually show the responsive web page.
Most web pages are made responsive for different screen sizes as well as mobile devices, such as cellphones and tablets. What so cool about responsive web design is that you can use CSS to adjust the width in the media queries. The code that you use to start the media queries "@media screen and (max-width: put the size of the mobile device here){}". Then inside the curly brackets you would put the code that's above the media query like the div tag any other tag you would like to make responsive.
When creating responsive web pages and websites always remember the width of the phone or tablet needs to be correct or it will go off the page. When creating the width for all the tags its best to use percentages, so if the media query width eight hundred pixels you would put the width of the tags in the query anywhere between fifty and one hundred percent that means its fifty or one percent of the width of that media query you put in. Well that's basically how to take a web page and make it responsive, any questions or errors feel free to comment below and we will answer them. Thank you reading our blog post check out Saturday's post on what are the differences between frame and timeline animation until have a good day.
No comments:
Post a Comment