There are a few “gotchas” to responsive design, and once you know them, the rest all makes sense.
Play with the code!!!
https://codepen.io/anon/pen/oVNBEX?editors=1100
View the full course!!!
https://www.youtube.com/watch?v=gQojMIhELvM&list=PLoYCgNOIyGABDU532eesybur5HPBVfC1G
Super helpful links on responsive images:
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
Responsive Design makes a website look amazing on any device. Using css media queries, good flexbox/grid layouts, srcset, and html5 picture tags, we can convert our website into a fully responsive site.
-~-~~-~~~-~~-~-
Also watch: “Tailwind CSS – why CSS utility classes save so much time”
https://www.youtube.com/watch?v=oU5ar0dmQEY
-~-~~-~~~-~~-~-
source
This is exactly what I needed. Thank you so much!
please i am a novice and i need help creating a message
Thank you for this great web developing series!
FOR YOUR COURSE I CAN BE A WEB DEVELPOER. YOU R A SOCIAL WORKER, YOU R DISTRIBUTIVE YOUR KNOWLEDGE FOR FREE OF COST, LOVE YOU VERY MUCH. YOU R MY FIRST TEACHER
Me: I only have a phone… Yeah, no choice but study it on mobile first.
Awesome…. 🔥🔥🔥🔥🔥🔥🔥
Thank you for your video, I really enjoyed it and learnt quite alot from it too!
How do i get that pixel demention
Thankyou for explaining how to make websites responsive, your style of teaching is excellent,
But when you have a 4k display phone ?
Excellent stuff, thanks
Hi everyone, for the latest version of VS code, where to get the developer tool to determine the website pixel??
loved the series, well done
Have you not taught about tables and files in HTML ?
sir everything is great but how did I get developer tool please tell me
Hello,
When I change the size of the page to 715px the logo moves to the right side of the last menu items, then when change to 500px the logo wrap below the menu items correctly.
What is the best way to make it wrap and not sets on the right side of the last menu item please?
Hey i cant find Developer tools in view /…
how to find it
Very well explained. Thank you!
thank you for useful videos , i love your "tada"s
It's pity that the images in your google drive are not found. Nice course though!
3:20 , i did everything step by step and it doesn't show any errors, but when i minimize the browser it doesn't change the color
from time to time you find an actually GREAT tutorial, good job and thank you!
Thank you SO much for this video! So easy to understand and follow. So glad I found you. ❤
your course is like a Super HTML course. You made it Damn Easy with few videos … I first saw your video 2 years ago.. but still I keep coming back to your videos only to re-watch any topic…
Excellent! this was so helpful. I don't know when you would see this but please kindly reply when you do. How do I download the exact logo and images you made use of? I used different logo and images but shit is kinda messed up probably cos of the difference in sizes.
Thanks a lot for this tutorials for 1 day I make my site way different form a peace scrab with no stlying my site become realy good and great with many efects and styling thanks a lot for making tutorials again! 🙂
hiiii i have a problem while trying to make my page responsive with the @ media tag, for example to 375px, the content in my actual website completely shifts how do i fix this?
this was very helpful, thank you for this!! This may be too general to pinpoint but do you have any ideas why the background color changing test works for me only when I input "min-width" as opposed to your "max-width"