Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • February 21, 2014 at 1:17 pm #227448
    taliwalt

    I have set the responsive layout max-width to 1210px for my site but I’d really like my single-product pages to have a max width of 1030px. I know how to target a particular page and change the max width;I use a css plugin that adds a custom css metabox to the page editor, and I simply include the following rule:

    .responsive .container {
width: 1030x !important;
}

.responsive .container .twelve.units {
width: 1030px !important;
}

    but I can’t think of how to do it for each product. Can you help me? Thanks

    February 21, 2014 at 1:38 pm #227459
    Ismael

    Hey Tali!

    Maybe, you can use the single-product selector. 

    .responsive .single-product .container {
width: 1030x !important;
}

.responsive .single-product .container .twelve.units {
width: 1030px !important;
}

    Regards,
    Ismael

    February 21, 2014 at 4:17 pm #227546
    taliwalt

    That got me on the right track. Ended up adding this to my custom css:

    /* #Desktop - Extra Large - Product
================================================== */
@media only screen and (min-width: 1340px) {

  .responsive_large .single-product .container .four.units {
    width: 310px;
  }
 
  .responsive_large .single-product .container .eight.units {
    width: 670px;
  }

  .responsive_large .single-product .container .twelve.units {
    width: 1030px;
  }

}

/* #Desktop - Product - Large
================================================== */
@media only screen and (min-width: 1140px) {

 .responsive_large .single-product .container .four.units {
    width: 270px;
  }
 
  .responsive_large .single-product .container .eight.units {
    width: 590px;
  }

  .responsive_large .single-product .container .twelve.units {
    width: 910px;
  }
  }
  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Changing the max-width for single-product pages’ is closed to new replies.