Skip to content

T
training-responsive-layout
Commit 1636f9c3 by Ajmal.S
Options

update flex css

parent 87288886
Showing with 27 additions and 12 deletions
assets/css/flex.css
...@@ -17,6 +17,12 @@ hr { ...@@ -17,6 +17,12 @@ hr {
width: 50%; width: 50%;
} }
.logo {
position: absolute;
top: 3%;
left: 8%;
}
.column { .column {
flex: 100%; flex: 100%;
min-height: 400px; min-height: 400px;
...@@ -25,6 +31,9 @@ hr { ...@@ -25,6 +31,9 @@ hr {
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
padding: 10%; padding: 10%;
display: flex;
flex-direction: column;
justify-content: space-around;
} }
.column:nth-of-type(1) { .column:nth-of-type(1) {
...@@ -52,12 +61,19 @@ hr { ...@@ -52,12 +61,19 @@ hr {
} }
figure { figure {
float: right;
margin: 0; margin: 0;
flex-grow: 1;
position: relative;
min-height: 10em;
max-height: 20em;
} }
figure img { figure img {
width: 100%; width: 100%;
height: 100%;
object-fit: contain;
position: absolute;
object-position: 80%;
} }
/***** Flexbox Css *****/ /***** Flexbox Css *****/
...@@ -69,10 +85,12 @@ figure img { ...@@ -69,10 +85,12 @@ figure img {
@media screen and (min-width: 540px) { @media screen and (min-width: 540px) {
.column { .column {
padding: 10%; padding: 10%;
flex-direction: row;
justify-content: space-around;
max-height: 400px;
} }
.info { .info {
float: left;
width: 30%; width: 30%;
} }
} }
...@@ -81,27 +99,25 @@ figure img { ...@@ -81,27 +99,25 @@ figure img {
.column { .column {
flex: 50%; flex: 50%;
max-height: 400px; max-height: 400px;
padding: 2%; padding: 4%;
} }
figure { figure {
width: 42%; width: 42%;
} }
.logo {
left: 2%;
}
} }
@media screen and (min-width: 1440px) { @media screen and (min-width: 1440px) {
.column { .column {
flex: 33.3%; flex: 33.3%;
flex-direction: column; flex-direction: row;
min-height: 450px; min-height: 450px;
padding: 4%; padding: 4%;
} }
figure img {
height: 25em;
object-fit: contain;
}
} }
/***** End Flexbox Css *****/ /***** End Flexbox Css *****/
\ No newline at end of file
flexbox-layout.html
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<body> <body>
<div class="parent"> <div class="parent">
<div class="column"> <div class="column">
<div> <div class="logo">
<img src="assets/img/logo-aoc.png" width="85" height="30"> <img src="assets/img/logo-aoc.png" width="85" height="30">
</div> </div>
<div class="info"> <div class="info">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment