Jei el. parduotuvės kūrimui naudojate Hostinger svetainių kūrimo įrankį, galite pastebėti, kad pagal numatytuosius nustatymus mobiliojoje svetainės versijoje produktai atvaizduojami viename stulpelyje.
Norėdami tą pakeisti, vadovaukitės žemiau pateiktais žingsniais 👇
Nukopijuokite kodą
Žemiau pateiktas kodas leidžia atvaizduoti produktus dviem stulpeliais mobiliojoje svetainės versijoje:
<style>
@media screen and (min-width: 301px) and (max-width: 920px) {
.block-product-list__content {
grid-template-columns: repeat(2, 1fr) !important;
gap: 5px !important;
min-width: 300px;
}
.product-list-item__price-wrapper *,
.product-list-item__title {
font-size: 14px !important;
}
.product-list-item__button{
padding: 5px !important;
}
.product-list-item__price-wrapper{
flex-direction: column;
}
.product-list-item__price-content{
justify-content: center;
}
}
@media screen and (max-width: 300px) {
.block-product-list__content {
grid-template-columns: repeat(2, 1fr) !important;
}
}
</style>
Norėdami atvaizduoti produktus trimis stulpeliais, šioje aukščiau nurodyto kodo eilutėje vietoje skaičiaus 2 įrašykite 3:
grid-template-columns: repeat(2, 1fr) !important;
PASTABA
Aukščiau nurodytame kode yra dvi tokios eilutės – pradžioje ir pabaigoje, o skaičių reikia pakeisti tik pirmoje (ankstesnėje) eilutėje; reiškia, norint atvaizduoti produktus trimis stulpeliais, visas kodas turi atrodyti taip:
<style>
@media screen and (min-width: 301px) and (max-width: 920px) {
.block-product-list__content {
grid-template-columns: repeat(3, 1fr) !important;
gap: 5px !important;
min-width: 300px;
}
.product-list-item__price-wrapper *,
.product-list-item__title {
font-size: 14px !important;
}
.product-list-item__button{
padding: 5px !important;
}
.product-list-item__price-wrapper{
flex-direction: column;
}
.product-list-item__price-content{
justify-content: center;
}
}
@media screen and (max-width: 300px) {
.block-product-list__content {
grid-template-columns: repeat(2, 1fr) !important;
}
}
</style>
Tokiu atveju, kodas veiks šitaip:
Jei mobiliojo įrenginio ekrano dydis yra nuo 301 PX iki 920 PX*, produktai bus atvaizduojami trimis stulpeliais
Jei mobiliojo įrenginio ekrano dydis būtų mažesnis, t.y., 300 PX ar mažiau, produktai būtų atvaizduojami dviem stulpeliais
* 920 PX yra lūžio taškas, skiriantis svetainės mobiliąją ir darbalaukio versijas Hostinger svetainių kūrimo įrankyje
Siekiant užtikrinti geriausią klientų patirtį, produktus mobiliojoje svetainės versijoje rekomenduojama atvaizduoti ne daugiau nei trimis stulpeliais 💡
Įklijuokite kodą
Svetainės kūrimo įrankyje atsidarykite skiltį Svetainės nustatymai → Integracijos ir įklijuokite kodą laukelyje Kodas. Galiausiai, išsaugokite nustatymus ir atnaujinkite svetainę.