Responsive/fluid layout for the first time! Well, how?

Question

Layout

I tried adaptive/rubber layout... That's what I got colorkid.ru .
I want to know the opinions of people on this layout, the advice will be very useful.

And immediately there is a specific question about my layout. The fact is that with a large screen height (widescreen or an inverted tablet), the site seems to stick to the top of the browser and there is emptiness between the footer and the bottom border of the browser. How to solve this problem so that the site takes up the entire height of the browser?

Answer 1

In terms of layout, product cards, in my opinion, are decreasing in vain, it would be better to just rebuild them. Yes, and they begin to narrow earlier than necessary. There is still a lot of space on the sides - and the site is already narrowing.
Regarding the height - everything is simple, in your case you need to:
Set for
html, body {height: 100%}
For main {min-height: 100%; padding-bottom: 100px} - this will make the main page full-page, but there will be room for the footer at the bottom. It can be more than 100 if you want an indent from the footer.
For footer set margin-top: -100px; - return the footer up to the vacated space.
And insert div class="clearfix" before /main, because you have a directory with float: left (otherwise the footer will fit on the directory).
There are other ways - google "footer to the bottom of the page".

Answer 2

In my opinion, you do not have a rubber site at all.

Answer 3

1. see how your site looks for screens less than 670px wide.
2. Why do you keep yellow padding for widths less than 960px?
3. a large empty area under the product cards in the presence of vertical scrolling. wtf?
4. if possible, do not scale images using the browser.

Answer 4

And what is its adaptability?)) 6 products in a row for mobile as for me somehow too much, and even such indents on the sides

Answer 5

a>article, which is used for the name of the product - not semantically at all.
and in the header, the articles are also out of place. read about the tag.
navigation is done either: ul>li>a or nav>a. Your option (nav>ul>li) is redundant and non-semantic.
in the footer section is also out of place.
padding: 5px 7.5px; - don't do half a pixel. Different browsers round and display differently. there was an article somewhere about it.
font-size make em better.
Well, as for me, the dominance of floats is not good at all. You can also make it without them at all. And so, in fact, almost the entire page has fallen out of the flow

Answer 6

joxi.ru/wRmzqLvFjM5orO - you can resize the moment when each of the items from a two-line becomes a one-line :)

Answer 7

Use a modular grid and media queries, then the process of laying out subsequent pages will become easier, the design will be better, and the layout will really be adaptive. Adaptive layout assumes the presence of a modular grid. The sizes of the blocks in this grid are written depending on the width of the browser window. Here is an example .