Commit 4e9e37cd authored by Jacek Lebioda's avatar Jacek Lebioda
Browse files

Responsiveness rebuilt for under 600px widths

parent dff08b96
......@@ -41,6 +41,7 @@
img {
width: -webkit-fill-available;
max-width: 100%;
}
}
......
// RESPONSIVENESS OF LAYOUT
.margin-wrapper {
@media only screen and (max-width: 600px) {
padding-left: 2%;
}
@media only screen and (min-width: 600px) {
padding-left: 22%;
}
}
.body-wrapper {
@media only screen and (max-width: 600px) {
@media only screen and (max-width: 600px) {
.margin-wrapper {
padding-left: 2%;
}
@media only screen and (max-width: 1400px) {
padding-left: 8%;
}
@media only screen and (min-width: 1400px) {
padding-left: calc(22% - 220px);
}
}
article {
@media only screen and (max-width: 600px) {
width: 96%;
}
@media only screen and (min-width: 600px) {
padding-left: 66%;
}
@media only screen and (min-width: 1025px) {
flex-direction: row;
min-width: 400px;
width: 80%;
}
@media screen and (orientation: landscape) and (max-width: 820px) {
font-size: 12px;
}
@media only screen and (max-width: 1025px) {
width: 75%;
flex-direction: column;
#left-column {
border-bottom: solid 1px #e6e6e6;
min-width: 92% !important;
ul {
min-width: 92% !important;
}
}
.body-wrapper {
padding-left: 2%;
}
div.narrower-article-div {
@media only screen and (min-width: 1500px) {
width: 65%;
padding-right: 20px;
.index-flex {
display: flex;
#site-content {
article {
display: block;
#left-column {
padding-top: 0px;
}
}
@media only screen and (max-width: 1500px) {
width: 90%;
.index-flex {
display: block;
div.narrower-article-div .index-flex .index-gray-box {
width: auto;
padding: 5px;
p {
margin-block-start: 5px;
}
}
}
}
#site-header #site-header-wrapper .elixir-image {
left: 20px;
}
}
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