Enhance mobile styles with adjustments to layout and spacing for improved user experience

This commit is contained in:
2025-01-15 19:35:54 +01:00
parent f0d2b1fa27
commit 51c773e84e
3 changed files with 431 additions and 404 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -1,533 +1,560 @@
@media (max-width: 767px) {
#box_freeshipping {
padding-right: 25px !important;
box-sizing: border-box !important;
}
#box_freeshipping {
padding-right: 25px !important;
box-sizing: border-box !important;
}
#box_specialoffer {
box-sizing: border-box !important;
padding: 0 15px !important;
#box_specialoffer {
box-sizing: border-box !important;
padding: 0 15px !important;
.boxhead {
text-align: center !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
}
.boxhead {
text-align: center !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
}
.top {
.box-xhr {
margin: 0 !important;
}
}
.top {
.box-xhr {
margin: 0 !important;
}
}
.rwd .menu {
height: auto !important;
padding-top: 10px !important;
}
.rwd .menu {
height: auto !important;
padding-top: 10px !important;
}
#box_productfull {
margin-bottom: 0 !important;
#box_productfull {
margin-bottom: 0 !important;
.tab-container {
padding-top: 0 !important;
.tab-container {
padding-top: 0 !important;
.product-tab {
&.none {
display: block !important;
}
}
.product-tab {
&.none {
display: block !important;
}
}
.product-tab[data-tab='box_productcomments'] {
margin-top: 25px !important;
.product-tab[data-tab='box_productcomments'] {
margin-top: 25px !important;
&::before {
content: 'Opinie';
display: block;
font-size: 20px;
font-weight: 700;
margin-bottom: 10px;
text-align: center;
}
}
&::before {
content: 'Opinie';
display: block;
font-size: 20px;
font-weight: 700;
margin-bottom: 10px;
text-align: center;
}
}
.product-tab[data-tab='box_description'] {
&::before {
content: 'Opis';
display: block;
font-size: 20px;
font-weight: 700;
margin-bottom: 10px;
text-align: center;
}
}
.product-tab[data-tab='box_description'] {
&::before {
content: 'Opis';
display: block;
font-size: 20px;
font-weight: 700;
margin-bottom: 10px;
text-align: center;
}
}
nav {
display: none !important;
}
}
nav {
display: none !important;
}
}
.smallgallery {
margin-bottom: 15px !important;
}
.smallgallery {
margin-bottom: 15px !important;
}
.productimg .mainimg {
height: 350px !important;
}
}
.productimg .mainimg {
height: 350px !important;
}
}
#box_productfull {
> .boxhead {
width: 100% !important;
box-sizing: border-box !important;
padding: 10px 0 !important;
margin-bottom: 0 !important;
}
}
#box_productfull {
>.boxhead {
width: 100% !important;
box-sizing: border-box !important;
padding: 10px 0 !important;
margin-bottom: 0 !important;
}
}
.footer {
padding-top: 25px !important;
.footer {
padding-top: 25px !important;
ul {
li {
padding: 3px 0 !important;
}
}
}
ul {
li {
padding: 3px 0 !important;
}
}
}
.userfooter {
padding-bottom: 25px !important;
.userfooter {
padding-bottom: 25px !important;
.fx-right {
padding-bottom: 25px !important;
text-align: center !important;
}
.fx-right {
padding-bottom: 25px !important;
text-align: center !important;
}
.fx-left {
background: transparent !important;
padding: 0 25px !important;
.fx-left {
background: transparent !important;
padding: 0 25px !important;
p {
* {
font-size: 13px !important;
font-weight: 400 !important;
}
}
p {
* {
font-size: 13px !important;
font-weight: 400 !important;
}
}
li {
&::before {
display: none !important;
}
}
}
}
li {
&::before {
display: none !important;
}
}
}
}
#box_articlelist,
#fx-about {
padding: 0 15px !important;
width: auto !important;
}
#box_articlelist,
#fx-about {
padding: 0 15px !important;
width: auto !important;
}
#box_custom40 {
width: auto !important;
}
#box_custom40 {
width: auto !important;
}
#box_mainproducts {
.product {
padding: 0 !important;
#box_mainproducts {
.product {
padding: 0 !important;
.product-inner-wrap {
padding: 15px !important;
.product-inner-wrap {
padding: 15px !important;
.price {
padding-top: 0 !important;
margin-top: 0 !important;
}
}
}
}
.price {
padding-top: 0 !important;
margin-top: 0 !important;
}
}
}
}
.logo-bar {
padding: 5px 0 0 !important;
}
.logo-bar {
padding: 5px 0 0 !important;
}
.menu {
margin-bottom: 0 !important;
.menu {
margin-bottom: 0 !important;
.innermenu {
border: 0 !important;
}
}
.innermenu {
border: 0 !important;
}
}
}
#box_mainproducts {
.product {
margin: 0 !important;
height: auto !important;
.product {
margin: 0 !important;
height: auto !important;
.prodname {
margin: 0 !important;
}
.prodname {
margin: 0 !important;
}
.productname {
font-size: 15px !important;
font-weight: 600 !important;
padding-top: 0 !important;
}
.productname {
font-size: 15px !important;
font-weight: 600 !important;
padding-top: 0 !important;
}
.price {
em {
font-size: 20px !important;
}
}
}
.price {
em {
font-size: 20px !important;
}
}
}
}
#box_specialoffer,
#box_lastadded {
.product {
> a {
display: block;
padding: 15px 15px 0 15px;
.product {
>a {
display: block;
padding: 15px 15px 0 15px;
.productnamewrap {
margin-bottom: 0;
height: auto !important;
padding-bottom: 10px;
.productnamewrap {
margin-bottom: 0;
height: auto !important;
padding-bottom: 10px;
.productname {
font-size: 15px !important;
font-weight: 600 !important;
}
}
}
.productname {
font-size: 15px !important;
font-weight: 600 !important;
}
}
}
.price {
padding: 0 15px;
margin: 0;
.price {
padding: 0 15px;
margin: 0;
p {
em {
font-size: 20px !important;
}
}
p {
em {
font-size: 20px !important;
}
}
.price__inactive {
font-size: 13px !important;
}
.price__inactive {
font-size: 13px !important;
}
.price__omnibus {
font-size: 12px !important;
.price__omnibus {
font-size: 12px !important;
.price__inactive {
font-size: 12px !important;
}
}
}
.price__inactive {
font-size: 12px !important;
}
}
}
form {
padding: 15px 15px 0;
}
}
form {
padding: 15px 15px 0;
}
}
}
#box_newsletter {
&:before {
background: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: block;
}
&:before {
background: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: block;
}
.boxhead {
z-index: 2;
position: relative;
.boxhead {
z-index: 2;
position: relative;
span {
color: #fff !important;
}
}
span {
color: #fff !important;
}
}
.innerbox {
z-index: 2;
position: relative;
.innerbox {
z-index: 2;
position: relative;
h5 {
color: #fff;
font-weight: 400 !important;
letter-spacing: 0 !important;
}
h5 {
color: #fff;
font-weight: 400 !important;
letter-spacing: 0 !important;
}
form {
input {
border: 0 !important;
}
form {
input {
border: 0 !important;
}
fieldset {
color: #fff;
font-weight: 400 !important;
}
}
}
fieldset {
color: #fff;
font-weight: 400 !important;
}
}
}
}
#box_custom40 {
padding: 0 15px;
padding: 0 15px;
a.read-more {
font-weight: 600;
color: #f59e01;
}
a.read-more {
font-weight: 600;
color: #f59e01;
}
.more {
display: none;
.more {
display: none;
&.open {
display: block;
}
}
&.open {
display: block;
}
}
p {
font-size: 13px;
line-height: 1.25 !important;
}
p {
font-size: 13px;
line-height: 1.25 !important;
}
}
#box_articlelist .innerbox article {
.article-header {
padding-top: 10px !important;
.article-header {
padding-top: 10px !important;
a {
margin: 0 !important;
text-transform: none !important;
height: auto !important;
font-size: 15px !important;
}
}
a {
margin: 0 !important;
text-transform: none !important;
height: auto !important;
font-size: 15px !important;
}
}
.article-content {
height: auto !important;
.article-content {
height: auto !important;
* {
line-height: 1.5 !important;
}
}
* {
line-height: 1.5 !important;
}
}
.readmore {
margin-top: 0 !important;
color: #f59e01 !important;
transition: all 0.3s ease;
font-weight: 600 !important;
}
.readmore {
margin-top: 0 !important;
color: #f59e01 !important;
transition: all 0.3s ease;
font-weight: 600 !important;
}
}
.box .boxhead {
border-bottom: 0 !important;
border-bottom: 0 !important;
span {
text-transform: none !important;
font-size: 30px !important;
font-weight: 700 !important;
span {
text-transform: none !important;
font-size: 30px !important;
font-weight: 700 !important;
@media (max-width: 767px) {
font-size: 24px !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;
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;
}
}
@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;
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;
}
}
@media (max-width: 767px) {
font-size: 24px !important;
}
}
}
#fx-icons {
padding: 50px 0 !important;
padding: 50px 0 !important;
}
#fx-news {
.boxhead {
display: none !important;
}
.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-txt {
* {
font-size: 13px !important;
font-family: 'Open Sans', sans-serif !important;
line-height: 1.5 !important;
}
a {
color: #f59e01 !important;
}
a {
color: #f59e01 !important;
}
.readmore {
font-weight: 600 !important;
}
}
.readmore {
font-weight: 600 !important;
}
}
}
.product-main-box {
.productdetails-more-details {
border-top: 0 !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
.productdetails-more-details {
border-top: 0 !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
.availability {
.first {
font-weight: 600 !important;
min-width: 0 !important;
}
}
.availability {
.first {
font-weight: 600 !important;
min-width: 0 !important;
}
}
.basket {
margin-top: 0 !important;
padding: 15px !important;
border: 5px solid #dedede !important;
border-radius: 5px;
.basket {
margin-top: 0 !important;
padding: 15px !important;
border: 5px solid #dedede !important;
border-radius: 5px;
.price {
.main-price {
font-size: 24px !important;
}
}
}
.price {
.main-price {
font-size: 24px !important;
}
}
}
.addtofav {
span {
text-transform: none !important;
font-weight: 600 !important;
}
}
.addtofav {
span {
text-transform: none !important;
font-weight: 600 !important;
}
}
}
.product-related-groups-module {
margin-top: 0 !important;
margin-top: 0 !important;
}
.product-tabs {
.innerbox {
* {
font-size: 14px !important;
font-family: 'Open Sans', sans-serif !important;
line-height: 1.5 !important;
}
}
.innerbox {
* {
font-size: 14px !important;
font-family: 'Open Sans', sans-serif !important;
line-height: 1.5 !important;
}
}
}
#turn-classic.btn {
height: 0 !important;
padding: 0 !important;
overflow: hidden !important;
display: none !important;
height: 0 !important;
padding: 0 !important;
overflow: hidden !important;
display: none !important;
}
#box_basketlist {
.basket-free-shipping {
margin-top: 15px;
border: 1px solid #f59e01;
padding: 10px;
text-align: center;
font-weight: 600;
border-radius: 5px;
}
.basket-free-shipping {
margin-top: 15px;
border: 1px solid #f59e01;
padding: 10px;
text-align: center;
font-weight: 600;
border-radius: 5px;
}
.quantity {
width: 9em;
text-align: center;
.quantity {
width: 9em;
text-align: center;
.btn-minus,
.btn-plus {
display: inline-flex;
width: 30px;
justify-content: center;
font-weight: 900;
background: #eee;
height: 40px;
margin: 0 !important;
align-items: center;
cursor: pointer;
transition: all 0.3s ease;
.btn-minus,
.btn-plus {
display: inline-flex;
width: 30px;
justify-content: center;
font-weight: 900;
background: #eee;
height: 40px;
margin: 0 !important;
align-items: center;
cursor: pointer;
transition: all 0.3s ease;
&:hover {
background: #f59e01;
color: #fff;
}
}
}
&:hover {
background: #f59e01;
color: #fff;
}
}
}
}
.consents__modal {
padding: 15px !important;
padding: 15px !important;
}
.c-products {
&.viewphot {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
}
&.viewphot {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
}
}
#box_productfull {
#box_freeshipping {
.free-shipping__content {
font-size: 20px;
line-height: 1.2;
color: #8dc73f;
text-transform: initial;
max-width: 260px;
}
}
#box_freeshipping {
.free-shipping__content {
font-size: 20px;
line-height: 1.2;
color: #8dc73f;
text-transform: initial;
max-width: 260px;
}
}
}
body.shop_basket {
.productlist {
.quantity {
@media (max-width: 767px) {
.btn-minus {
width: 20px !important;
}
.btn-plus {
width: 20px !important;
}
.shaded_inputwrap {
width: 60px;
display: inline-block;
.productlist {
.quantity {
@media (max-width: 767px) {
.btn-minus {
width: 20px !important;
}
input {
width: 100% !important;
}
}
}
}
}
.btn-plus {
width: 20px !important;
}
.shaded_inputwrap {
width: 60px;
display: inline-block;
input {
width: 100% !important;
}
}
}
}
}
}
.shop_basket_step2,
.shop_basket_address {
#box_freeshipping {
margin: 10px auto;
padding: 10px;
border: 1px solid #f59e01;
width: calc(100vw - 30px);
max-width: 1160px;
border-radius: 6px;
.boxhead {
margin-bottom: 0;
span {
margin-top: 0;
font-size: 20px !important;
}
}
.free-shipping__content {
font-weight: 600;
}
}
}