Commit 340acc6e authored by Jacek Lebioda's avatar Jacek Lebioda
Browse files

Responsiveness rebuilt for under 1025px widths

parent 4e9e37cd
......@@ -2,7 +2,7 @@
layout: default
---
<article class="margin-wrapper">
<article class="body-wrapper margin-wrapper">
<div id="left-column">
<h2>{{ page.section }}</h2>
......
......@@ -29,7 +29,7 @@
border-radius: 6px;
background: #efefef;
border: 1px solid #ebebeb;
width: 400px;
width: auto;
margin-right: 2%;
margin-bottom: 15px;
}
......@@ -42,6 +42,7 @@
img {
width: -webkit-fill-available;
max-width: 100%;
min-width: 200px;
}
}
......
// RESPONSIVENESS OF LAYOUT
@media only screen and (max-width: 600px) {
.margin-wrapper {
padding-left: 2%;
$MOBILE_DEVICES: 600px;
$TABLET_DEVICES: 1025px;
$LOW_RES: 1605px;
$HD_RES: 1930px;
@media only screen and (max-width: $MOBILE_DEVICES) {
.index-flex {
display: block;
}
}
@media only screen and (max-width: $LOW_RES) {
.body-wrapper {
padding-left: 2%;
}
}
@media only screen and (min-width: $MOBILE_DEVICES) {
.index-flex {
display: flex;
}
#site-content article div.narrower-article-div .index-flex .index-gray-box {
min-width: 300px;
width: 400px;
}
}
@media only screen and (max-width: $TABLET_DEVICES) {
.margin-wrapper {
padding-left: 2%;
}
#site-header #site-header-wrapper .elixir-image {
left: 20px;
}
#site-content {
article {
display: block;
#left-column {
div#left-column {
padding-top: 0px;
width: calc(98% - 20px);
ul {
width: calc(96% - 20px);
}
}
div.narrower-article-div .index-flex .index-gray-box {
width: auto;
padding: 5px;
p {
margin-block-start: 5px;
......@@ -22,7 +55,16 @@
}
}
}
}
@media only screen and (min-width: $TABLET_DEVICES) {
.margin-wrapper {
padding-left: calc(2% + 200px);
}
.body-wrapper.margin-wrapper {
padding-left: 2%;
}
#site-header #site-header-wrapper .elixir-image {
left: 20px;
left: -150px;
}
}
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