[AdminOG]

Hello

This is the site in question.
https://www.leafsideonline.com/online-store
Login:
test@test.com
Pass:
test

This is the CSS add in the theme section in Ecwid that works fine on tablet and PC but on mobile phone the store comes up all stacked and right side aligned...



/* Move categories to the top */
.ecwid-categories-vertical {
position: absolute !important;
top: 80px;
}
/* Move Ecwid store to the right */
.ecwid-productBrowser {
margin-left: 200px !important;
min-height: 300px;
}

/* Disable the changes above for Mobile */
@media screen and (max-width: 320px) {
.ecwid-categories-vertical {
display: none;
}
.ecwid-productBrowser {
margin-left: 0px !important;
min-height: 0px;
}

Thanks for the help.

[Daria L.]

Originally Posted by Leafside Online

Hello

This is the site in question.
https://www.leafsideonline.com/online-store
Login:
test@test.com
Pass:
test

This is the CSS add in the theme section in Ecwid that works fine on tablet and PC but on mobile phone the store comes up all stacked and right side aligned...



/* Move categories to the top */
.ecwid-categories-vertical {
position: absolute !important;
top: 80px;
}
/* Move Ecwid store to the right */
.ecwid-productBrowser {
margin-left: 200px !important;
min-height: 300px;
}

/* Disable the changes above for Mobile */
@media screen and (max-width: 320px) {
.ecwid-categories-vertical {
display: none;
}
.ecwid-productBrowser {
margin-left: 0px !important;
min-height: 0px;
}

Thanks for the help.

Hello,

thanks for your message!

I've inspected your CSS theme and found an inaccuracy in the second part of your code (for mobile devices). Please, remove this code from your CSS theme in Ecwid control panel>Settings>Design:

/* Disable the changes above for Mobile  */
@media screen and (max-width: 320px) {
    	.ecwid-categories-vertical {
        		display: none;
	}
    	.ecwid-productBrowser {
        		margin-left: 0px !important;
        		min-height: 0px;
align:left;
    	}

and insert this one instead:

/* Disable the changes above for Mobile  */
@media screen and (max-width: 640px) {
.ecwid-categories-vertical {
        display: none !important;
    }
}
@media screen and (max-width: 640px) {
   .ecwid-productBrowser {
        margin-left: 0px !important;
        min-height: 0px;
    
    }
}

Don't forget to save the changes.

Please try it out and let me know if any further assistance is required. I'll be glad to help you.

[AdminOG]

Sweet thanks.