The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #1  
Old 05-18-2017, 02:45 AM
AdminOG's Avatar
AdminOG is offline
 
Join Date: Feb 2017
Posts: 8
Default

Mobile View issue with added CSS everything els fine, WIX site


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.
  #2  
Old 05-19-2017, 10:16 AM
Daria L.'s Avatar
Daria L. Daria L. is offline
Ecwid Team
 
Join Date: May 2015
Posts: 558
Default

Quote:
Originally Posted by Leafside Online View Post
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:

Code:
/* 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:

Code:
/* 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.
__________________
Daria L.
Customer Care
Ecwid Help Portal
Ecwid Knowlegde Base
  #3  
Old 05-26-2017, 03:03 PM
AdminOG's Avatar
AdminOG AdminOG is offline
 
Join Date: Feb 2017
Posts: 8
Smile

Sweet thanks.
The Following User Says Thank You to AdminOG For This Useful Post:
Daria L. (05-29-2017)
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 04:55 AM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.