Project-Pro/vidok.com
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance responsiveness of "O Nas" page layout with media queries for better mobile experience

Browse Source
This commit is contained in:
Roman Pyrih
2025-04-22 15:57:22 +02:00
parent 651d2f61f2
commit f0cc804989
3 changed files with 42 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
layout/style-css/o-nas.css
View File

File diff suppressed because one or more lines are too long

2
layout/style-css/o-nas.css.map
View File

File diff suppressed because one or more lines are too long

43
layout/style-scss/o-nas.scss
View File

@@ -58,6 +58,10 @@ p {
display: flex;
flex-direction: column;
@include respond-below(md) {
margin-top: 30px;
}
._row {
&-1 {
display: flex;
@@ -65,11 +69,19 @@ p {
align-items: center;
gap: 30px;
@include respond-below(md) {
flex-direction: column;
}
._col {
&-1 {
width: 100%;
max-width: 430px;
@include respond-below(md) {
text-align: center;
}
h1 {
position: relative;
color: $cTxtBlack;
@@ -88,9 +100,12 @@ p {
left: 0;
bottom: 0;
width: 100%;
max-width: 390px;
height: 2px;
background: $cTxtBlack;
@include respond-above(md) {
max-width: 390px;
}
}
}
h2 {
@@ -206,12 +221,23 @@ p {
flex-direction: row;
column-gap: 70px;
align-items: flex-end;
margin-left: 70px;
@include respond-above(md) {
margin-left: 70px;
}
@include respond-below(md) {
flex-direction: column;
align-items: center;
gap: 15px;
}
._col-img {
}
._col-data {
@include respond-below(md) {
text-align: center;
}
p {
color: $cTxtBlack;
font-family: $font3;
@@ -221,7 +247,10 @@ p {
line-height: 1;
text-transform: uppercase;
margin-bottom: 10px;
margin-left: 44px;
@include respond-above(md) {
margin-left: 44px;
}
}
h3 {
color: $cWhite;
@@ -261,6 +290,10 @@ p {
flex-direction: row;
gap: 32px;
@include respond-below(md) {
flex-wrap: wrap;
}
li {
border-radius: 20px;
background: $cWhite;
@@ -273,6 +306,10 @@ p {
width: calc(100% / 4);
@include respond-below(md) {
width: calc(100% / 2 - (32px / 2));
}
img {
width: 100%;
max-width: fit-content;