boldsupport
4/21/2017 - 2:35 PM

Product Upsell Window Responsive Code

Tier 2 Product Upsell Window Responsive Code - Linked from: https://support.boldcommerce.com/hc/en-us/articles/115005175863-Product-Upsell-Window-Responsive-Code

Product Upsell Window Responsive Code
content_copyfile_download
<style>

.upsell-description-small {
height: auto !important;
}

.upsell-description {
max-height: none !important;
}

@media (max-width: 675px) {
 
#one-product .product-buttons {
  width: 125px;
}
 
#one-product .product-price {
text-align: left;
padding-left: 0px !important;
}
 
#one-product .upsell-description-small {
margin-bottom:10px !important;
}
 
#one-product .limit-disclaimer {
width:100% !important;
text-align: right;
}
 
#one-product .addtocart {
  float: right;
}
 
#one-product .product-group-variants {
width: auto !important:
margin-left: 0px !important;
}
 
#one-product .product-image img {
width: 100% !important;
max-height: auto !important;
}
}
 
@media (max-width: 325px) {
#one-product .product-buy, #one-product .product-name, #one-product .product-partnum, #one-product .product-options, #one-product .product-group-variants, #one-product .product-buttons, #one-product .limit-disclaimer, one-product .product-price, #one-product .product-buttons, #one-product .product-price.sale {
float:none !important;
width: 100% !important;
    text-align: center !important;
}

#one-product .addtocart {
    float: none !important;
}

#one-product .product-image {
    float: none;
   width: 100%;
}

.product-price,     {
text-align: center !important
}

#five-product .addtocart, #three-product .addtocart, #four-product .addtocart  {
  margin-top: 5px !important;
}
 
.upsell-description {
text-align: center;
font-size: 150%;
}

.product-name, .product-partnum {
font-size: 12px !important;
}

.product-price.sale {
font-size: 18px !important;
}

.upsell-description-small {
font-size: 11px !important;
}

.product-group-variants select {
max-width: 100% !important;
}

#two-product .product-wrapper {
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
width:85%;
margin: 6px 3px 0 !important;
}

#three-product .product-wrapper, #four-product .product-wrapper, #five-product .product-wrapper {
width:40% !important;
height: 350px !important;
padding: 5px !important;
margin: 6px 3px 0 !important;
  float: left !important;
}

#three-product .product-name, #four-product .product-name,  #five-product .product-name {
height: 55px !important;
max-height: none !important;
}
 
#five-product .product-wrapper {
  margin-right: 10px !important;
}
 
#five-product .product-name, #five-product .product-partnum, #five-product .product-options {
  width: 100% !important;
margin-left: 0px !important;
text-align:center !important;
}

#five-product .product-image {
width: 100% !important
}
 
#five-product .product-buy {
  width: 100% !important;
}
 
#five-product .product-price.sale, #five-product .limit-disclaimer, #five-product .product-name, #five-product .product-partnum, #five-product .product-group-variants, .product-price.regular {
  text-align: center !important;
}
 
#five-product .product-buttons {
float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}
 
#five-product .product-buy {
margin-top:0px !important;
padding-top:0px !important;
}
 
#five-product .product-buttons {
float: none !important;
text-align: center !important;
}
}
 
@media (min-width: 326px) and (max-width: 450px) {

#five-product .addtocart, #three-product .addtocart, #four-product .addtocart  {
  margin-top: 5px !important;
}

.product-name {
font-size: 12px !important;
}

.product-price.sale {
font-size: 19px !important;
}

.upsell-description-small, .product-partnum {
font-size: 12px !important;
}

.upsell-description {
text-align: center;
font-size: 170%;
}

.product-group-variants select {
max-width: 105% !important;
}

#two-product .product-wrapper {
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
width:85%;
}

#three-product .product-wrapper, #four-product .product-wrapper,  #five-product .product-wrapper {
width:42% !important;
height: 350px !important;
padding: 5px !important;
  float: left !important;
}

#three-product .product-name, #four-product .product-name,  #five-product .product-name {
height: 60px !important;
max-height: none !important;
}

#five-product .product-wrapper {
  margin-right: 10px !important;
}
 
#five-product .product-name, #five-product .product-partnum, #five-product .product-options {
  width: 100% !important;
margin-left: 0px !important;
text-align:center !important;
}

#five-product .product-image {
width: 100% !important
}
 
#five-product .product-buy {
  width: 100% !important;
}
 
#five-product .product-price.sale, #five-product .limit-disclaimer, #five-product .product-name, #five-product .product-partnum, #five-product .product-group-variants, .product-price.regular {
  text-align: center !important;
}
 
#five-product .product-buttons {
float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}
 
#five-product .product-buy {
margin-top:0px !important;
padding-top:0px !important;
}
 
#five-product .product-buttons {
float: none !important;
text-align: center !important;
}
}
 
@media (min-width: 451px) and (max-width: 675px) {
.product-name {
font-size: 13px !important;
}

.product-price.sale {
font-size: 20px !important;
}

.upsell-description-small, .product-partnum {
font-size: 13px !important;
}

.upsell-description {
text-align: center;
font-size: 180%;
}

.product-group-variants select {
max-width: 105% !important;
}

#two-product .product-wrapper {
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
width:85%;
}

#three-product .product-wrapper, #four-product .product-wrapper,  #five-product .product-wrapper {
width:44% !important;
height: 300px !important;
padding: 5px !important;
  float: left !important;
}

#three-product .product-name, #four-product .product-name,  #five-product .product-name {
height: 45px !important;
max-height: none !important;
}

#five-product .product-wrapper {
  margin-right: 10px !important;
}
 
#five-product .product-name, #five-product .product-partnum, #five-product .product-options {
  width: 100% !important;
margin-left: 0px !important;
text-align:center !important;
}
#five-product .product-image {
width: 100% !important
}
 
#five-product .product-buy {
  width: 100% !important;
}
 
#five-product .product-price.sale, #five-product .limit-disclaimer, #five-product .product-name, #five-product .product-partnum, #five-product .product-group-variants, .product-price.regular {
  text-align: center !important;
}
 
#five-product .product-buttons {
float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}
 
#five-product .product-buy {
margin-top:0px !important;
padding-top:0px !important;
}
 
#five-product .product-buttons {
float: none !important;
text-align: center !important;
}
}
 
@media (min-width: 675px) {
.product-group-variants {
width:auto !important;
}
 
#one-product .product-group-variants {
  margin-left: 90px;
  float: left !important;
}
}

</style>