Hi guys, i’ve adjusted the multicolumn with multiple css code to make it the way i want it to look on mobile and desktop, and they are looking completely fine with 3 columns a row. But when i tried looking through tablet, suddenly the alignment is off. Is there any way to fix only the tablet view?
Website: https://fonpintar.com.my/
Password: taclau
I think its due to this code
@media screen and (min-width: 749px){
.multicolumn.background-none.no-heading .page-width {
max-width: initial;
}
.multicolumn-list__item.grid__item.center {
width: 33%;
}
}
@media only screen and (max-width:749px){
body .multicolumn slider-component li.multicolumn-list__item.grid__item
{
width: calc(33% - 10px) !important;
}
}
Hello @KelvinLeow
You can try this code: it will be helpful to you
Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.
ul#Slider-template--19422052843839__ed23233f-a886-47db-a7c7-a3fe5696ffe6 {
width: 100% !important;
margin-left: 0px 1important;
}
Hi Oscoprofessional, I would want to remain my current width setting that i’ve already set for my desktop view. What I noticed is that my current code
@media (min-width: 750px) {
ul#Slider-template--19422052843839__ed23233f-a886-47db-a7c7-a3fe5696ffe6 {
width: 60%;
margin-left: 350px;
}
@media (min-width: 750px) {
ul#Slider-template--19422052843839__2de070ff-624c-49bb-9b2f-9e3538099960 {
width: 60%;
margin-left: 350px;
}
Does not apply to ipad/tablet view but only works for desktop.
Looking forward to your help!
Hi Oscoprofessional, the code you provided will override the previous code that i applied in order to change the width of the multicolumn on desktop view. For the current situation im happy with how the desktop view is but what I noticed is that it’s not applying to the tablet/ipad.
@media (min-width: 750px) {
ul#Slider-template--19422052843839__ed23233f-a886-47db-a7c7-a3fe5696ffe6 {
width: 60%;
margin-left: 350px;
}
@media (min-width: 750px) {
ul#Slider-template--19422052843839__2de070ff-624c-49bb-9b2f-9e3538099960 {
width: 60%;
margin-left: 350px;
}
Current desktop & mobile view, which im okay with:
View on Tablet/iPad:
Looking forward to your reply.
