Skip to content

T
training-responsive-layout
Commit fe153d35 by Ajmal.S
Options

Flexbox css modified

parent 5f4eb4a4
Showing with 7 additions and 6 deletions
assets/css/flex.css
...@@ -18,13 +18,13 @@ hr { ...@@ -18,13 +18,13 @@ hr {
} }
.column { .column {
padding: 10%; flex: 100%;
width: 100%;
min-height: 400px; min-height: 400px;
height: 100vh; height: 100vh;
max-height: 700px; max-height: 700px;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
padding: 10%;
} }
.column:nth-of-type(1) { .column:nth-of-type(1) {
...@@ -71,8 +71,7 @@ figure img { ...@@ -71,8 +71,7 @@ figure img {
@media screen and (min-width: 540px) { @media screen and (min-width: 540px) {
.column { .column {
flex: 100%; padding: 10%;
padding: 4%;
} }
.info { .info {
...@@ -89,6 +88,7 @@ figure img { ...@@ -89,6 +88,7 @@ figure img {
.column { .column {
flex: 50%; flex: 50%;
max-height: 400px; max-height: 400px;
padding: 2%;
} }
figure { figure {
...@@ -101,6 +101,7 @@ figure img { ...@@ -101,6 +101,7 @@ figure img {
flex: 33.3%; flex: 33.3%;
flex-direction: column; flex-direction: column;
min-height: 450px; min-height: 450px;
padding: 4%;
} }
} }
......
flexbox-layout.html
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
<p>1 Year Free Mobile Security</p> <p>1 Year Free Mobile Security</p>
</div> </div>
<figure> <figure>
<img src="assets/img/image-1.png" class="c-img"> <img src="assets/img/image-1.png">
</figure> </figure>
</div> </div>
<div class="column"> <div class="column">
...@@ -76,7 +76,7 @@ ...@@ -76,7 +76,7 @@
<p>1000 pts Discount on Subscription</p> <p>1000 pts Discount on Subscription</p>
</div> </div>
<figure> <figure>
<img src="assets/img/image-6.png" class="c-img"> <img src="assets/img/image-6.png">
</figure> </figure>
</div> </div>
</div> </div>
......
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