bartek/forkio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enable RWD for about section

Browse Source
This commit is contained in:
Bartłomiej Pluta
2018-04-16 11:03:55 +02:00
parent a02b17a51b
commit a290809750
3 changed files with 39 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/index.html
View File

@@ -113,12 +113,13 @@
<div class="about">
<div class="container">
<div class="row">
<div class="about__features col-6">
<div class="about__features col-12 col-xl-6">
<p class="about__title about__title--desktop">&lt;Here is what you get&gt;</p>
<div class="row feature">
<div class="col-3 feature__icon">
<div class="col-4 col-md-3 feature__icon">
<img src="img/features/1.png" alt=""/>
</div>
<div class="col-9">
<div class="col-8 col-md-9">
<p class="feature__title">
Created to Make The Web Better
</p>
@@ -130,10 +131,10 @@
</div>
</div>
<div class="row feature">
<div class="col-3 feature__icon">
<div class="col-4 col-md-3 feature__icon">
<img src="img/features/2.png" alt=""/>
</div>
<div class="col-9">
<div class="col-8 col-md-9">
<p class="feature__title">
Incredibly Powerful Tool
</p>
@@ -145,10 +146,10 @@
</div>
</div>
<div class="row feature">
<div class="col-3 feature__icon">
<div class="col-4 col-md-3 feature__icon">
<img src="img/features/3.png" alt=""/>
</div>
<div class="col-9">
<div class="col-8 col-md-9">
<p class="feature__title">
Experimental Stuff
</p>
@@ -160,10 +161,10 @@
</div>
</div>
<div class="row feature">
<div class="col-3 feature__icon">
<div class="col-4 col-md-3 feature__icon">
<img src="img/features/4.png" alt=""/>
</div>
<div class="col-9">
<div class="col-8 col-md-9">
<p class="feature__title">
Created to Make The Web Better
</p>
@@ -175,8 +176,8 @@
</div>
</div>
</div>
<div class="about__what-you-get col-6">
<p class="about__title about__title--no-wrap">&lt;Here is what you get&gt;</p>
<div class="about__what-you-get col-12 col-xl-6">
<p class="about__title about__title--no-wrap about__title--desktop-xl">&lt;Here is what you get&gt;</p>
<img src="img/features/editor.png" alt="Revolutionary editor">
</div>
</div>

28
src/scss/_about.scss
View File

@@ -1,7 +1,12 @@
.about {
background-color: $background-light;
padding: 75px 0 0 30px;
height: 710px;
@media all and (max-width: $desktop-xl) {
.about {
padding: 75px 0 0 30px;
height: 710px;
}
}
}
.about__title {
@@ -13,4 +18,23 @@
&--no-wrap {
white-space: nowrap;
}
&--desktop-xl {
display: block;
}
&--desktop {
display: none;
text-align: center;
}
@media all and (max-width: $desktop-xl) {
&--desktop-xl {
display: none;
}
&--desktop {
display: block;
}
}
}

2
src/scss/_feature.scss
View File

@@ -3,7 +3,7 @@
}
.feature__icon {
text-align: center;
text-align: left;
}
.feature__title {