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 {
width: 50%;
}
.logo {
position: absolute;
top: 3%;
left: 8%;
}
.column {
flex: 100%;
min-height: 400px;
......@@ -25,6 +31,9 @@ hr {
box-sizing: border-box;
overflow: hidden;
padding: 10%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.column:nth-of-type(1) {
......@@ -52,12 +61,19 @@ hr {
}
figure {
float: right;
margin: 0;
flex-grow: 1;
position: relative;
min-height: 10em;
max-height: 20em;
}
figure img {
width: 100%;
height: 100%;
object-fit: contain;
position: absolute;
object-position: 80%;
}
/***** Flexbox Css *****/
......@@ -69,10 +85,12 @@ figure img {
@media screen and (min-width: 540px) {
.column {
padding: 10%;
flex-direction: row;
justify-content: space-around;
max-height: 400px;
}
.info {
float: left;
width: 30%;
}
}
......@@ -81,27 +99,25 @@ figure img {
.column {
flex: 50%;
max-height: 400px;
padding: 2%;
padding: 4%;
}
figure {
width: 42%;
}
.logo {
left: 2%;
}
}
@media screen and (min-width: 1440px) {
.column {
flex: 33.3%;
flex-direction: column;
flex-direction: row;
min-height: 450px;
padding: 4%;
}
figure img {
height: 25em;
object-fit: contain;
}
}
/***** End Flexbox Css *****/
\ No newline at end of file
flexbox-layout.html
......@@ -11,7 +11,7 @@
<body>
<div class="parent">
<div class="column">
<div>
<div class="logo">
<img src="assets/img/logo-aoc.png" width="85" height="30">
</div>
<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