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

Enhance responsive design styles for mobile view, including menu adjustments, footer padding, and article layout improvements

Browse Source
This commit is contained in:
Jacek Pyziak
2024-12-22 13:04:44 +01:00
parent baa5befc99
commit ba282b4c38
3 changed files with 154 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ocelio.pl/style.css
View File

@@ -1 +1 @@
@media(max-width: 767px){#box_mainproducts .product{padding:0 !important}#box_mainproducts .product .product-inner-wrap{padding:15px !important}#box_mainproducts .product .product-inner-wrap .price{padding-top:0 !important;margin-top:0 !important}.logo-bar{display:none}.menu{display:grid;grid-template-columns:150px 1fr}.menu:before{display:none !important}.menu .link-logo{display:block;padding:0 10px}.menu .innermenu{border:0 !important}}#box_mainproducts .product{padding:15px !important;margin:0 !important;height:auto !important}#box_mainproducts .product .prodname{margin:0 !important}#box_mainproducts .product .productname{font-size:15px !important;font-weight:600 !important;padding-top:0 !important}#box_mainproducts .product .price em{font-size:20px !important}#box_specialoffer .product>a,#box_lastadded .product>a{display:block;padding:15px 15px 0 15px}#box_specialoffer .product>a .productnamewrap,#box_lastadded .product>a .productnamewrap{margin-bottom:0;height:auto !important;padding-bottom:10px}#box_specialoffer .product>a .productnamewrap .productname,#box_lastadded .product>a .productnamewrap .productname{font-size:15px !important;font-weight:600 !important}#box_specialoffer .product .price,#box_lastadded .product .price{padding:0 15px;margin:0}#box_specialoffer .product .price p em,#box_lastadded .product .price p em{font-size:20px !important}#box_specialoffer .product .price .price__inactive,#box_lastadded .product .price .price__inactive{font-size:13px !important}#box_specialoffer .product form,#box_lastadded .product form{padding:15px 15px 0}#box_newsletter:before{background:rgba(0,0,0,.6);width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;display:block}#box_newsletter .boxhead{z-index:2;position:relative}#box_newsletter .boxhead span{color:#fff !important}#box_newsletter .innerbox{z-index:2;position:relative}#box_newsletter .innerbox h5{color:#fff;font-weight:400 !important;letter-spacing:0 !important}#box_newsletter .innerbox form input{border:0 !important}#box_newsletter .innerbox form fieldset{color:#fff;font-weight:400 !important}#box_custom40{padding:0 25px}#box_custom40 a.read-more{font-weight:600;color:#f59e01}#box_custom40 .more{display:none}#box_custom40 .more.open{display:block}#box_custom40 p{font-size:13px;line-height:1.25 !important}/*# sourceMappingURL=style.css.map */
@media(max-width: 767px){.rwd .menu{height:auto !important;padding-top:10px !important}#box_productfull>.boxhead{width:100% !important;box-sizing:border-box !important;padding:25px 0 !important}.footer{padding-top:25px !important}.footer ul li{padding:3px 0 !important}.userfooter .fx-right{padding-bottom:25px !important;text-align:center !important}.userfooter .fx-left{background:rgba(0,0,0,0) !important;padding:0 25px !important}.userfooter .fx-left p *{font-size:13px !important;font-weight:400 !important}.userfooter .fx-left li::before{display:none !important}#box_articlelist,#fx-about{padding:0 25px !important;width:auto !important}#box_custom40{width:auto !important}#box_mainproducts .product{padding:0 !important}#box_mainproducts .product .product-inner-wrap{padding:15px !important}#box_mainproducts .product .product-inner-wrap .price{padding-top:0 !important;margin-top:0 !important}.logo-bar{display:none}.menu{display:grid;grid-template-columns:150px 1fr}.menu:before{display:none !important}.menu .link-logo{display:block;padding:0 10px}.menu .innermenu{border:0 !important}}#box_mainproducts .product{padding:15px !important;margin:0 !important;height:auto !important}#box_mainproducts .product .prodname{margin:0 !important}#box_mainproducts .product .productname{font-size:15px !important;font-weight:600 !important;padding-top:0 !important}#box_mainproducts .product .price em{font-size:20px !important}#box_specialoffer .product>a,#box_lastadded .product>a{display:block;padding:15px 15px 0 15px}#box_specialoffer .product>a .productnamewrap,#box_lastadded .product>a .productnamewrap{margin-bottom:0;height:auto !important;padding-bottom:10px}#box_specialoffer .product>a .productnamewrap .productname,#box_lastadded .product>a .productnamewrap .productname{font-size:15px !important;font-weight:600 !important}#box_specialoffer .product .price,#box_lastadded .product .price{padding:0 15px;margin:0}#box_specialoffer .product .price p em,#box_lastadded .product .price p em{font-size:20px !important}#box_specialoffer .product .price .price__inactive,#box_lastadded .product .price .price__inactive{font-size:13px !important}#box_specialoffer .product form,#box_lastadded .product form{padding:15px 15px 0}#box_newsletter:before{background:rgba(0,0,0,.6);width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;display:block}#box_newsletter .boxhead{z-index:2;position:relative}#box_newsletter .boxhead span{color:#fff !important}#box_newsletter .innerbox{z-index:2;position:relative}#box_newsletter .innerbox h5{color:#fff;font-weight:400 !important;letter-spacing:0 !important}#box_newsletter .innerbox form input{border:0 !important}#box_newsletter .innerbox form fieldset{color:#fff;font-weight:400 !important}#box_custom40{padding:0 25px}#box_custom40 a.read-more{font-weight:600;color:#f59e01}#box_custom40 .more{display:none}#box_custom40 .more.open{display:block}#box_custom40 p{font-size:13px;line-height:1.25 !important}#box_articlelist .innerbox article .article-header{padding-top:10px !important}#box_articlelist .innerbox article .article-header a{margin:0 !important;text-transform:none !important;height:auto !important;font-size:15px !important}#box_articlelist .innerbox article .article-content{height:auto !important}#box_articlelist .innerbox article .article-content *{line-height:1.5 !important}#box_articlelist .innerbox article .readmore{margin-top:0 !important;color:#f59e01 !important;transition:all .3s ease;font-weight:600 !important}.box .boxhead{border-bottom:0 !important}.box .boxhead span{text-transform:none !important;font-size:30px !important;font-weight:700 !important}@media(max-width: 767px){.box .boxhead span{font-size:24px !important}}#box_custom40 h1{border-bottom:0 !important;text-transform:none !important;font-size:30px !important;font-weight:700 !important}@media(max-width: 767px){#box_custom40 h1{font-size:24px !important}}#box_articlelist h2{border-bottom:0 !important;text-transform:none !important;font-size:30px !important;font-weight:700 !important}@media(max-width: 767px){#box_articlelist h2{font-size:24px !important}}#fx-icons{padding:50px 0 !important}#fx-news .boxhead{display:none !important}#fx-about .fx-txt *{font-size:13px !important;font-family:"Open Sans",sans-serif !important;line-height:1.5 !important}#fx-about .fx-txt a{color:#f59e01 !important}#fx-about .fx-txt .readmore{font-weight:600 !important}/*# sourceMappingURL=style.css.map */

2
ocelio.pl/style.css.map
View File

File diff suppressed because one or more lines are too long

152
ocelio.pl/style.scss
View File

@@ -1,4 +1,60 @@
@media(max-width: 767px) {
.rwd .menu {
height: auto !important;
padding-top: 10px !important;
}
#box_productfull>.boxhead {
width: 100% !important;
box-sizing: border-box !important;
padding: 25px 0 !important;
}
.footer {
padding-top: 25px !important;
ul {
li {
padding: 3px 0 !important;
}
}
}
.userfooter {
.fx-right {
padding-bottom: 25px !important;
text-align: center !important;
}
.fx-left {
background: transparent !important;
padding: 0 25px !important;
p {
* {
font-size: 13px !important;
font-weight: 400 !important;
}
}
li {
&::before {
display: none !important;
}
}
}
}
#box_articlelist,
#fx-about {
padding: 0 25px !important;
width: auto !important;
}
#box_custom40 {
width: auto !important;
}
#box_mainproducts {
.product {
padding: 0 !important;
@@ -165,4 +221,100 @@
font-size: 13px;
line-height: 1.25 !important;
}
}
#box_articlelist .innerbox article {
.article-header {
padding-top: 10px !important;
a {
margin: 0 !important;
text-transform: none !important;
height: auto !important;
font-size: 15px !important;
}
}
.article-content {
height: auto !important;
* {
line-height: 1.5 !important;
}
}
.readmore {
margin-top: 0 !important;
color: #f59e01 !important;
transition: all 0.3s ease;
font-weight: 600 !important;
}
}
.box .boxhead {
border-bottom: 0 !important;
span {
text-transform: none !important;
font-size: 30px !important;
font-weight: 700 !important;
@media (max-width: 767px) {
font-size: 24px !important;
}
}
}
#box_custom40 {
h1 {
border-bottom: 0 !important;
text-transform: none !important;
font-size: 30px !important;
font-weight: 700 !important;
@media (max-width: 767px) {
font-size: 24px !important;
}
}
}
#box_articlelist {
h2 {
border-bottom: 0 !important;
text-transform: none !important;
font-size: 30px !important;
font-weight: 700 !important;
@media (max-width: 767px) {
font-size: 24px !important;
}
}
}
#fx-icons {
padding: 50px 0 !important;
}
#fx-news {
.boxhead {
display: none !important;
}
}
#fx-about {
.fx-txt {
* {
font-size: 13px !important;
font-family: 'Open Sans', sans-serif !important;
line-height: 1.5 !important;
}
a {
color: #f59e01 !important;
}
.readmore {
font-weight: 600 !important;
}
}
}