boldsupport
5/13/2016 - 4:44 PM

Builder-Arrow-Headers-Responsive-CSS

/* Bold Custom Responsive Styling for Arrow Headers Theme*/
@media only screen and (max-width: 480px ){
    body .shappify_product_builder .option_image_pane {
    border-left:none;
    width: 100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

body .shappify_product_builder .steps_body {
    width: 100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

body .shappify_product_builder .step_header{
display:none;
}

body .shappify_product_builder .step_header.current{
margin-left: 7%;
width: 80%;
display:inline-block;
}

body #navigation_buttons{
     position: absolute;
    bottom: 6px;
    display: block;
    right: auto;
}

body .navigation_buttons .hide-btn{
    opacity: 0.65;
    cursor: not-allowed;
    display:inline-block !important;
}

body .shappify_product_builder #builder_verify_button {    
margin-top: -420px;
    right: 17px;
    position: absolute;
}


}

/* Other Bold CSS Changes*/
body .shappify_product_builder .btn, .verify_pane .builder_addtocart_button .btn {
    padding: 1px 12px;
}

.rotationViewer.option_image.spritespin-instance {
    width: 100% !important;
    max-width:325px;
}

/* End of Responsive Styling */