Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/styllloz/public_html/qa-include/qa-base.php on line 1175

Warning: session_start(): Cannot start session when headers already sent in /home/styllloz/public_html/qa-include/app/users.php on line 162

Warning: Cannot modify header information - headers already sent by (output started at /home/styllloz/public_html/qa-include/qa-base.php:1175) in /home/styllloz/public_html/qa-include/app/users.php on line 1267

Warning: Cannot modify header information - headers already sent by (output started at /home/styllloz/public_html/qa-include/qa-base.php:1175) in /home/styllloz/public_html/qa-include/app/page.php on line 356
Like in HTML + CSS to set the height dynamic adaptive block? - code-flow.club | Q&A

Like in HTML + CSS to set the height dynamic adaptive block?


Warning: count(): Parameter must be an array or an object that implements Countable in /home/styllloz/public_html/qa-theme/donut-theme/qa-donut-layer.php on line 274
0 like 0 dislike
18 views
Is there a website with responsive design, you want to make the block as follows:
when the screen width 360 height was 250px, the width of the entire screen.
when the screen width, 650 height was 450px width to full screen.
when you change the screen width from 650 to 360, to the height of the block gradually changed from 250px to 450px, for example when the screen width, 600 height of the block was approximately 410px.
When you change the width of the screen more than 650 - to maintain altitude 450 and align the unit in the center.
by | 18 views

3 Answers

0 like 0 dislike
(pseudo-code):
margin: 0 auto; height: 69vw; min-height: 250px; max-height: 450px;
by
0 like 0 dislike


.container { background-color: lightblue; position: relative; width: 100%; padding-top: 69%; } @media (min-width: 650px) { .container { height: 450px; width: 650px; margin: 0 auto; padding-top: 0!important; } }
by
0 like 0 dislike
by
110,608 questions
257,186 answers
0 comments
35,181 users