Found such a problem on your site. It is in the built-in browser on Android. In Opera, Makston and Dolphin Browser, Next Browser, too, as it turned out. On other OSes (and in FireFox, Google Chrome and Puffin for Android browsers) everything is in order.

Then I was told that there might be a problem with flex. Maybe some prefixes are needed? Where are they taken?

It emerges only in portrait orientation ( max-width ?), In landscape - everything is in its place.

Or maybe it's not a footer and aside problem? On android, it seems, the article block is generally empty and has a minimum height. Displayed under the header as a narrow strip. But it should contain all the text that "crawled" under the footer.

I am new to css, my first site using it. Help me decide, please. Styles are:

  @charset "utf-8"; /* CSS Document */ * {margin: 0; padding: 0;} /* Сброс стилей */ /* Конец сброса стилей*/ html { min-height: 100%; width: 100%; font-size: 100%; } /* Браузерное умолчание, т.е. 16px */ h1 { font-size: 5vmin; font-size: 1.5rem; } h2 { font-size: 3.5vmin; font-size: 1.2rem; text-align: center; line-height: 1; } h4 { font-size: 3vmin; font-size: 1rem; font-weight: normal; text-align: center; display:inline;} h5 { text-align: center; line-height: 1.5; } h6 { text-align: center; line-height: 1.5; } p { font-size: 3vmin; font-size: 0.9rem; } .accordion h3 { font-size: 2.2vmin; font-size: 0.7rem; display: block; } .title_block { line-height: 1.7; /* 34px */} #map {display:block} body { font-size: 100%; line-height: 1.6875; font-family: Georgia; height: 100%; min-height: 100%; } #main { margin: 0px; padding: 0px; display: flex; flex-flow: row; } #main > article { height: 100%; margin: 4px; padding: 10px 20px 10px 20px; border: 1px solid #87a7b1; border-radius: 7pt; background: #F7F7F7; flex: 3 1 60%; order: 2; text-align:justify; } #main > aside { margin: 4px; padding: 7px; border: 1px solid #8888bb; border-radius: 7pt; background: #eceeec; flex: 1 6 20%; order: 3; border: 1px solid #9cb6be; border-radius: 7pt; padding-bottom: 35px; } header { position: relative; display: block; margin: 4px; padding: 5px; height: auto; min-height: 100px; border: 1px solid #9cb6be; border-radius: 7pt; background: #e4ebed; } footer { position: relative; display: block; margin: 4px; padding: 5px; height: auto; min-height: 85px; border: 1px solid #9cb6be; border-radius: 7pt; background: #C9D1C7; } img { max-width: 100%; } a { color:#0043AF; } /* Too narrow to support three columns */ @media all and (max-width: 640px) { #main, #page { flex-direction: column; } #main > article, #main > nav, #main > aside { /* Return them to document order */ order: 0; } #main > nav, #main > aside, header { min-height: 40px; max-height: 500px; } footer {min-height: 100px;} }

enter image description here

  • Zoom chrome :) - Flippy
  • In chrome on a laptop - everything is fine. Including in different resolutions (developer tools) And on the android emulator * a I have no chrome. Although I can deliver. In the morning I will unsubscribe - Natalya
  • Yes Installed Google Chrome. In it - everything is well displayed. - Natalya
  • Nobody uses the built-in browser :) I don’t remember from which, but on the newest default browser, this is chrome :) so you can get rid of it. And to take up this problem when it will be necessary to support old mobile phones (never?) - Flippy
  • Thanks, of course :) BUT! In the opera, the same problem. So you need to solve it somehow. And I have a couple of friends who use the default browser in android. Maybe more, I just never was interested. Statistics show that up to 6% use the built-in browser. And Opera 6% use. Already 12 it turns out. It is necessary to solve the problem. - Natalya

1 answer 1

Not

Standard android browser (and apparently the rest of the above) do not know how to properly display display: flex . You have it here:

 #main { ... display: flex; flex-flow: row; }

In media queries, replace with display: block , where, in fact, you have everything in a column and it is not needed:

 @media all and (max-width: 640px) { #main, #page { display:block; } ... }
  • THANK YOU SO MUCH! - Natalya