Skip to content

Instantly share code, notes, and snippets.

@speedupmate
Created January 3, 2014 14:38
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save speedupmate/8238872 to your computer and use it in GitHub Desktop.
Save speedupmate/8238872 to your computer and use it in GitHub Desktop.
/* Responsive styles created by Valentin Niklasson */
@media screen and (min-width : 954px) {
div.checkoutcontainer div.input-city { width: 45%!important; }
div.checkoutcontainer div.input-country select { width: 83%!important; }
div.checkoutcontainer div.input-city { width: 100%!important; }
div.checkoutcontainer div.input-region { width: 55.8%!important; }
div.checkoutcontainer div.input-address-short .input-text,
div.checkoutcontainer div.input-firstname .input-text,
div.checkoutcontainer div.input-lastname .input-text,
div.checkoutcontainer div.input-email .input-text,
div.checkoutcontainer div.input-telephone .input-text,
div.checkoutcontainer div.input-company .input-text,
div.checkoutcontainer div.input-fax .input-text,
div.checkoutcontainer div.input-password .input-text { width: 69.5%!important; }
.v-fix { margin-right: 5%; }
}
@media screen and (min-width : 581px) and (max-width : 953px) {
div.checkoutcontainer div.input-address-short .input-text,
div.checkoutcontainer div.input-firstname .input-text,
div.checkoutcontainer div.input-lastname .input-text,
div.checkoutcontainer div.input-email .input-text,
div.checkoutcontainer div.input-telephone .input-text,
div.checkoutcontainer div.input-company .input-text,
div.checkoutcontainer div.input-fax .input-text,
div.checkoutcontainer div.input-password .input-text,
div.checkoutcontainer div.input-postcode .input-text { width: 80%!important; }
div.wrapper {min-width: 581px}
}
@media screen and (min-width : 460px) and (max-width : 953px) {
div.checkoutcontainer div.input-city { width: 50%!important; }
div.checkoutcontainer div.input-country select { width: 87%; }
div.onestepcheckout-enable-newsletter { width: 60%!important; }
div.input-password { width: 55%!important;}
div.checkoutcontainer div.input-city { width: 50%!important; }
div.checkoutcontainer div.input-country select { width: 87%; }
div.onestepcheckout-enable-newsletter { width: 60%!important; }
div.input-password { width: 55%!important;}
div.checkoutcontainer div.input-company .input-text { width: 77%!important; }
div.checkoutcontainer div.input-address .input-text, div.checkoutcontainer div.input-city .input-text, div.checkoutcontainer div.input-country select { width: 88.2%;}
.onestepcheckout-threecolumns div.onestepcheckout-column-left { width: 112%!important; background: none!important; margin-bottom: 18px;}
.onestepcheckout-threecolumns div.onestepcheckout-column-middle { width: 112%!important; background: none!important; border-top: 1px solid #D8D2C7; margin-bottom: 18px;}
.onestepcheckout-threecolumns div.onestepcheckout-column-right { width: 112%!important; border-top: 1px solid #D8D2C7}
div.checkoutcontainer div.input-postcode, div.checkoutcontainer div.input-region { width: 49%; }
div.checkoutcontainer li.taxvat div.input-box { width: 42%!important;}
div.checkoutcontainer div.input-city { width: 100%!important;}
div.wrapper {min-width: 460px}
div.main {width: auto; max-width : 1000px}
}
@media screen and (min-width : 320px) and (max-width : 580px) {
div.checkoutcontainer div.input-address-short .input-text, div.checkoutcontainer div.input-firstname .input-text, div.checkoutcontainer div.input-lastname .input-text, div.checkoutcontainer div.input-email .input-text, div.checkoutcontainer div.input-telephone .input-text, div.checkoutcontainer div.input-password .input-text { width: 98%; }
div.checkoutcontainer div.input-fax .input-text, div.checkoutcontainer div.input-company .input-text, div.checkoutcontainer div.input-postcode .input-text { width: 80%; }
div.checkoutcontainer { border-top: none; }
.onestepcheckout-threecolumns div.onestepcheckout-column-left { width: 95%!important; background: none!important;}
.onestepcheckout-threecolumns div.onestepcheckout-column-middle { width: 95%!important; background: none!important; margin-bottom: 18px;}
.onestepcheckout-threecolumns div.onestepcheckout-column-right { width: 95%!important; }
div.checkoutcontainer div.input-city { width: 100%!important; }
div.checkoutcontainer div.input-firstname,
div.checkoutcontainer div.input-lastname,
div.checkoutcontainer div.input-email,
div.checkoutcontainer div.input-telephone { width: 90%!important; }
.onestepcheckout-address-line { }
table.onestepcheckout-summary { width: 90%!important;}
table.onestepcheckout-totals { width: 90%!important;}
.onestepcheckout-coupons input#id_couponcode {width: 90%!important; margin-bottom: 5px;}
div.checkoutcontainer div.onestepcheckout-summary,
div.checkoutcontainer div.onestepcheckout-coupons,
div.checkoutcontainer div.onestepcheckout-place-order-wrapper { margin-left: 0;}
#onestepcheckout-place-order { width: 90%!important; }
#addressreview {width: 85%!important; padding: 10px 10px 10px 10px !important;}
#addressreview_summary div.data {height: 275px;}
#addressreview .leftcol{width: 110%!important;}
#addressreview .rightcol{width: 110%!important;}
.large.onestepcheckout-button{margin-top: 8px;}
div.wrapper {min-width: 320px}
div.main {width: auto; max-width : 580px}
}
@media screen and (max-width : 459px) {
div.checkoutcontainer div.input-address-short .input-text, div.checkoutcontainer div.input-firstname .input-text, div.checkoutcontainer div.input-lastname .input-text, div.checkoutcontainer div.input-email .input-text, div.checkoutcontainer div.input-telephone .input-text, div.checkoutcontainer div.input-password .input-text { width: 100%; }
div.checkoutcontainer { border-top: none; }
.onestepcheckout-threecolumns div.onestepcheckout-column-left { width: 95%!important; border-top: 1px solid #D8D2C7; background: none!important;}
.onestepcheckout-threecolumns div.onestepcheckout-column-middle { width: 95%!important; border-top: 1px solid #D8D2C7; background: none!important; margin-bottom: 18px;}
.onestepcheckout-threecolumns div.onestepcheckout-column-right { width: 95%!important; border-top: 1px solid #D8D2C7; padding-top: 0;}
div.checkoutcontainer div.input-firstname,
div.checkoutcontainer div.input-lastname,
div.checkoutcontainer div.input-email,
div.checkoutcontainer div.input-telephone,
div.checkoutcontainer div.input-address .input-text,
div.checkoutcontainer div.input-city .input-text,
div.checkoutcontainer div.input-country select { width: 100%!important; }
div.checkoutcontainer div.input-address, div.checkoutcontainer li.taxvat div.input-box { }
div.onestepcheckout-enable-newsletter { width: 60%!important;}
div.input-password { width: 55%!important;}
table.onestepcheckout-summary { width: 90%!important;}
table.onestepcheckout-totals { width: 90%!important;}
.onestepcheckout-coupons input#id_couponcode {width: 90%!important; margin-bottom: 5px;}
div.checkoutcontainer div.onestepcheckout-summary,
div.checkoutcontainer div.onestepcheckout-coupons,
div.checkoutcontainer div.onestepcheckout-place-order-wrapper { margin-left: 0;}
#onestepcheckout-place-order { width: 90%!important; }
div.checkoutcontainer div.input-region,
div.checkoutcontainer div.input-postcode { width: 49%; }
div.checkoutcontainer div.input-region,
div.checkoutcontainer div.input-postcode,
div.checkoutcontainer div.input-company,
div.checkoutcontainer div.input-fax,
div.checkoutcontainer div.input-address-short .input-text,
div.checkoutcontainer div.input-firstname .input-text,
div.checkoutcontainer div.input-lastname .input-text,
div.checkoutcontainer div.input-email .input-text,
div.checkoutcontainer div.input-telephone .input-text,
div.checkoutcontainer div.input-company .input-text,
div.checkoutcontainer div.input-fax .input-text,
div.checkoutcontainer div.input-password .input-text,
div.checkoutcontainer div.input-postcode .input-text,
div.checkoutcontainer div.input-region .input-text { float: none; width: 100%; }
div.checkoutcontainer div.input-city { width: 100%!important; }
div.checkoutcontainer div.input-box div.v-fix { width: 45%!important; }
#ccsave_expiration, #ccsave_expiration_yr { width: 95%!important; }
#addressreview {width: 85%!important; padding: 10px 10px 10px 10px !important;}
#addressreview_summary div.data {height: 275px;}
#addressreview .leftcol{width: 110%!important;}
#addressreview .rightcol{width: 110%!important;}
.large.onestepcheckout-button{margin-top: 8px;}
div.wrapper {min-width: 320px}
div.main {width: auto; max-width : 459px}
}
/* End of responsive design */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment