Commit aa7850a3 authored by Martin Schoeler's avatar Martin Schoeler

Add more mobile styling

parent 0ca0c8a2
......@@ -6,7 +6,7 @@ paginate_path: /blog/page/:num/
paginate: 8
# bump if alterting styles
version: 107
version: 108
# read speed
wpm: 160
......
......@@ -18,8 +18,10 @@
{% for feature in include.solution.tools %}
<div class="feature">
<img class="feature__image" alt="{{feature.title}}" src="/images/solutions/{{feature.image}}">
<h3 class="feature__title">{{feature.title}}</h3>
<p class="feature__text">{{feature.text}}</p>
<div class="feature__container">
<h3 class="feature__title">{{feature.title}}</h3>
<p class="feature__text">{{feature.text}}</p>
</div>
</div>
{% endfor %}
</div>
......@@ -28,6 +30,8 @@
<div class="integrations__content">
<h3 class="title">Easy Integrations</h3>
<p class="desc">Improve developer process. Rocket.Chat moves between your team and apps automatically so you can focus on your most important work.</p>
<img class="integrations__image mobile" alt="integrations" src="/images/solutions/easy-integrations-mobile2.png">
<img class="integrations__image mobile" alt="integrations" src="/images/solutions/easy-integrations-mobile.png">
<p class="label theme_type--light">Many integrations available and counting...</p>
<div class="icons">
<a href="https://rocket.chat/docs/administrator-guides/integrations/github/" rel="noopener noreferrer">
......
......@@ -30,7 +30,8 @@ body.solutions-page {
@media screen and (max-width: $tablet) {
flex-direction: column-reverse;
margin-top: 78px;
margin-top: 180px;
padding-bottom: 64px;
&__image {
margin-bottom: 46px;
......@@ -38,8 +39,8 @@ body.solutions-page {
}
&__text {
text-align: center;
align-items: center;
text-align: left;
align-items: left;
}
}
}
......@@ -93,6 +94,15 @@ body.solutions-page {
&__image {
margin-right: 40px;
height: 367px;
&.mobile {
display: none;
&:first-child {
margin-top: 36px;
}
&:nth-child(2) {
margin-bottom: 36px;
}
}
}
&__content {
......@@ -144,13 +154,71 @@ body.solutions-page {
}
@media screen and (max-width: $tablet) {
padding: 64px 0 64px;
text-align: left;
align-items: left;
&__title {
width:100%;
text-align: left;
}
&__icons {
grid-template-columns: repeat(1, auto);
grid-template-rows: repeat(6, auto);
.feature {
flex-direction: row;
text-align: left;
max-width: unset;
width: 100%;
padding: 0px 16px;
&__image {
margin: 0 18px 0 0;
}
}
}
&__integrations {
flex-direction: column-reverse;
.integrations {
&__content {
.label {
text-align: center;
margin-top: 64px;
}
.icons {
justify-content: center;
margin-top: 24px;
margin-bottom: 64px;
}
.atlassian-logos {
width: 100%;
flex-wrap: wrap;
justify-content: center;
height: 65px;
}
.text {
text-align: center;
margin-bottom: 24px;
}
}
&__image {
display: none;
&.mobile {
display: block;
width: 100%;
height: auto;
}
}
}
}
}
}
......@@ -202,8 +270,10 @@ body.solutions-page {
}
@media screen and (max-width: $tablet) {
padding: 64px 0 64px;
&__title {
width: 736px;
width: 100%;
margin: auto;
}
}
......@@ -247,10 +317,30 @@ body.solutions-page {
height: 384px;
width: auto;
max-width: unset;
&.mobile {
display: none;
}
}
}
@media screen and (max-width: $tablet) {
flex-direction: column;
padding: 46px 16px;
&__content {
width: 100%;
}
}
&__image {
margin-right: 0;
width: 100%;
margin-top: 46px;
display: none;
&.mobile {
display: block;
}
}
}
......
......@@ -48,7 +48,8 @@ redirect_from:
<p class="theme_type--dark">Besides chat and many integrations, you can still count with: audit trail, unlimited history, scalability and more special features.</p>
<a href="#" class="button--ghost" data-featherlight="#solution-form">Contact Us</a>
</div>
<span class="solutions-box__image"><img src="/images/solutions/devices.png" alt="screens" />
<img class="solutions-box__image" src="/images/solutions/devices.png" alt="screens" />
<img class="solutions-box__image mobile" src="/images/solutions/devices-mobile.png" alt="screens" />
</div>
</div>
</section>
......
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