Skip to content

Instantly share code, notes, and snippets.

@boldsupport
Last active October 11, 2017 16:10
Show Gist options
  • Save boldsupport/dd1efe2084a474c03b0d758e5e0fb992 to your computer and use it in GitHub Desktop.
Save boldsupport/dd1efe2084a474c03b0d758e5e0fb992 to your computer and use it in GitHub Desktop.
<script>
$( document ).ready(function() {
var w = window.innerWidth;
if (w < 630) {
$( '.builder_verify_button .btn-success ' ).remove();
$( '.next-btn' ).after( '<div id="builder_verify_button" class="builder_verify_button" style="display:none"><button type="button" class="btn btn-success" onclick="popup_confirm()">Finish</button></div>' );
$( '.steps_body' ).after('<div id="total_price" class="total_price">$0.00</div>');
}
var image_resize = $('.option_image_pane').width();
$('div#option_image').css('max-height', image_resize);
});
</script>
<style>
@media (max-width: 630px) {
.step_title {
font-size: 18px !important;
}
#option_image {
height: auto !important;
}
#step_container {
font-size: small !important;
}
.shappify_product_builder .total_price {
margin-top: 10px !important;
margin-left: auto !important;
margin-right: auto !important;
display: block !important;
width: 50px !important;
}
.verify_pane .total_price {
padding-top: 5px !important;
}
#navigation_buttons button {
padding: 10px 18px !important;
}
#builder_verify_button {
margin-top: 0px !important;
margin-left: 0px !important;
}
.option_image_pane {
height: auto !important;
min-height: 250px !important;
padding-bottom: 10px !important;
}
.shappify_product_builder .option_image_pane, .steps_body {
width: 100% !important;
}
.step_header {
width:100% !important;
}
.shappify_product_builder .option_image_pane {
border: 1px solid #ddd !important;
}
.shappify_product_builder {
width: 80% !important;
}
.option_value, .option_id {
width: 90% !important;
margin-left: auto !important;
margin-right: auto !important;
display: block !important;
}
.option_value select {
width: 100% !important;
}
.choices {
width:100% !important;
margin:0px !important;
height: auto !important;
padding: 0px !important;
border-left: 0px !important;
border-right: 0px !important;
font-size: 12px !important;
}
.choices.selected {
border-color: lightgrey !important;
border-left: 0px !important;
border-right: 0px !important;
background-color: #DDD !important;
}
.option_image {
width: 20% !important;
max-width: 325px !important;
}
.shappify_product_builder .choices img {
float: left !important;
margin: 0px !important;
width: 25% !important;
height: auto !important;
}
.steps_body, .option_choices {
padding: 0px !important;
margin:0px !important;
}
.step_details {
height: 350px !important;
}
.step_container {
text-align: center !important;
}
.steps_body {
height: 425px !important;;
}
.option_image_pane {
margin-top:30px !important;
}
.step_header {
display: none !important;
font-size: 20px !important;
padding: 0px !important;
}
.current {
display: block !important;
}
.shappify_product_builder .total_price {
font-size: 26px !important;
}
}
@media (max-width: 768px) {
.tooltip {
display: none !important;
}
.shappify_product_builder {
max-width: 1060px !important;
margin-left: auto !important;
margin-right: auto !important;
color:black !important;
}
.navigation_buttons {
display: block !important;
}
.shappify_product_builder .choices img {
margin: 5px 0px 5px 5px !important;
}
.description {
margin: 10px !important;
}
.shappify_product_builder .option_image .spritespin-stage {
margin-left: auto !important;
margin-right: auto !important;
position: inherit !important;
}
#builder_addtocart_button {
clear:both !important;
padding-top:5px !important;
}
div#add_qty {
padding-top: 5px !important;
}
input#qty {
margin-top: -5px !important;
}
}
.step_info_facebox {
width: auto !important;
}
#facebox {
top: 0 !important;
left: 0 !important;
width: 100% !important;\
}
.step_info_facebox .step_info_description {
width: auto !important;
}
#facebox .popup {
position: relative;
border: 15px solid rgba(0,0,0,0) !important;
-webkit-box-shadow: 0 0 0 !important;
-moz-box-shadow: 0 0 0 !important;
box-shadow: 0 0 0 !important;
}
div#image_preview img {
height: auto !important;
}
#facebox .content {
width: 100% !important;
box-sizing: border-box !important;
}
div#image_preview {
max-width: 325px !important;
margin-left: auto;
margin-right: auto;
}
.steps {
width: 84% !important;
margin-left: auto !important;
margin-right: auto !important;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment