loading...
Cover image for How to make a responsive footer With No media Queries🗺

How to make a responsive footer With No media Queries🗺

saigowthamr profile image Sai gowtham ・1 min read

Footer with no media queries and Margins.

Have bored of writing more code for simple things today I'm showing how to Write less code with more features.Once again I'm using a grid to achieve these.

Grid is a new thing in css3 which is 2 dimensional the main thing in a grid is very easy to make layouts with less time and less code.

footer With No media Queries

Just one line of code does all things

 grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
Enter fullscreen mode Exit fullscreen mode

auto-fit and min-max functions are used.

I will explain what min-max is min-max takes two arguments first value is minimum and second is max value.

auto-fit helps us to cover the available space with the given columns.

Check out Demo & Code in Code pen

Discussion

pic
Editor guide
Collapse
equinusocio profile image
Mattia Astorino

Nice! But please note that this is not a “responsive” behavior, it is just the normal grid fluid/block behavior. Responsive means mostly adapt your layout/app with media queries like targetting touch devices, pointer precision, screen resolution, device orientation..and many other things you can do with the mediaqueries.

Collapse
saigowthamr profile image
Sai gowtham Author

Yeah you can do many things with media queries but you can do some things without media queries dude it is responsive layout what it does is automatically calculates the available space.check out jen Simmons layout land channel in YouTube if you have doubts 😎

Collapse
equinusocio profile image
Mattia Astorino

Fluid, adaptive, responsive design... they existed long before jen simmons videos :) and she say that responsive web design is something more complex, complete that may include fluid layouts and adaptive layouts in the same time. Responsive web design is much more than a normal block level element behavior 😅. The point here is that the title is misleading to learning people.

Cheers.

Thread Thread
saigowthamr profile image
Sai gowtham Author

Cool bro... 😅 but grid is not existed before...

Collapse
kumarparth profile image
kumar-parth

Hi,

nice approach...but can you let me help me on how to make grid-template-columns work in ie11..

Collapse
equinusocio profile image
Collapse
kumarparth profile image
kumar-parth

So Media Query is the way to go right!!

Collapse
saigowthamr profile image
Sai gowtham Author

Check the browser support and prefixes.

Collapse
thomasxbanks profile image
Thomas Banks

That's awesome! Thanks 😀