Hello,
How are you guys today I writing this post after to much request from you. In this post I created simple responsive footer using HTML & CSS.
You can also create a good and responsive footer after using this I use flex and grid so its responsive for all the media query you can be use any of this to create a footer but I code this footer for beginners. if you are good in frontend then you don't need to write this much of code. I use 2 media query for this post.
I hope you like this also comments about your thoughts. Please Follow on Instagram For More Content. @developer_nikhil27.
Thank you 🙂!
Top comments (2)
The whole thing is a footer, so why is it a section with a footer around what should be a paragraph? Those headings indicate that each is a section, so with the DIV and wasteful classes? Your second section lacks UL/OL for there to even be LI. What's the pointless data- attributes for? What makes "contact us", "About", and "Social Media" the headING (singular) that everything on every page of the site is a subsection of? Aka what an H1 MEANS? Just because you have icons doesn't mean you shouldn't have text in those social anchors or that they shouldn't be a list. Your markup is semantic gibberish.
As to your CSS, you could do the same thing using flex and flex-wrap without media queries. Your pixel based declarations range from broken to telling large swaths of users to go plow themselves,
Quick rewrite to show what I mean. Fixing the semantic and accessibility flubs, letting flex-wrap do the heavy lifting, and cutting way back on how much CSS is needed to do the job.
codepen.io/jason-knight/pen/poWjQVO
Flex wrap is your friend. It's also why I'm always saying that people struggle too hard making predetermined broken media queries when they don't need to!
Particularly when slopping in PX metric media queries and PX metric fonts, the monument to telling users with accessibility needs to sod off.
You are correct bro but your code is not beginner friendly i write this post for beginners to understand how media quary and flexs works