eCommerce Page Responsive Setting Update – Drops

This is an update for Milo purchased before July 9, 2014.

1) Log into your Weebly

If you haven’t done so, click to log in to your Weebly account

2) Go in to Theme Code Editor

Click into “design” and into “edit html/css”

3) Click into the “no-header.html” page layout

Here locate this set of codes in the area:

@media all and (max-width: 600px) {
/* Mobile Layout */
.imageGallery > div {
width: 50% !important;
margin: 0 auto !important;
}
.imageGallery img.galleryImageBorder{
width: 100% !important;
}
img.galleryImageBorder{
width: 94% !important;
}
}

4) Insert new codes

Here add the new update code highlighted below:

@media all and (max-width: 600px) {
/* Mobile Layout */
.imageGallery > div {
width: 50% !important;
margin: 0 auto !important;
}
.imageGallery img.galleryImageBorder{
width: 100% !important;
}
img.galleryImageBorder{
width: 94% !important;
}
#wsite-com-checkout-list .wsite-remove-button{
display: block !important;
margin-left: 0 !important;
left: 20px !important;
}
#wsite-com-checkout-list .wsite-com-checkout-item-image, #wsite-com-checkout-summary-list .wsite-com-checkout-item-image {
height: 50px !important;
width: 50px !important;
}
#wsite-com-checkout-list .wsite-form-input, #wsite-com-checkout-summary-list .wsite-form-input {
width: 20px !important;
}
#wsite-com-checkout-list .wsite-com-checkout-breakdown .wsite-form-input {
width: 100% !important;
}
}
@media all and (max-width: 320px) {
/* Mobile Layout */
#wsite-com-checkout-list .wsite-com-checkout-item-image, #wsite-com-checkout-summary-list .wsite-com-checkout-item-image {
display: none !important;
}
#wsite-com-checkout-list tbody td:first-child, #wsite-com-checkout-summary-list tbody td:first-child{
width: 0 !important;
}
a.wsite-com-continue-shopping {
width: 95%;
text-align: center;
display: block;
margin: 0 auto 20px auto;
border: 1px solid !important;
padding: 5px 0;
}
button.wsite-button.wsite-button-large.wsite-button-highlight.wsite-checkout-button {
width: 280px !important;
display: block !important;
margin: 0 auto !important;
text-align: center !important;
left: 50% !important;
}
button.wsite-button.wsite-button-large.wsite-button-highlight.wsite-checkout-button span.wsite-button-inner{
padding: 0 0 0 90px !important;
}
}

5) Save & publish your site

Weebly sites are cache so to truly test the fix, please clear your browser cache OR view the site in incognito/private.

Tags: