Full width on single product page

  • Resolved dshayne

    (@dshayne)


    6 years, 1 month ago

    Hi,
    I am just starting out with woocommerce and would like to make my single product page go all the way across. As it is, I would like the image to move to the left but, even more, I would like the summary (description) to stretch out more to the right. I have used the customizer to add css but if I increase the summary width it goes below the image. It appears that the right side of the page is holding space for a sidebar, but there is no sidebar showing (which is fine with me).

    Below is the additional CSS I have added using the customizer (although, honestly, I think it is the same as the site’s original code). I am a newbie to hooks and php but unafraid (I know enough to apply it, just not how to write it). Any help would be appreciated!
    Debbie

    .single-product div.product .summary {

    width: 52.9411764706%;
    float: right;
    margin-right: 0;

    }

    .single-product div.product .woocommerce-product-gallery {

    width: 41.1764705882%;
    float: left;
    margin-right: 5.8823529412%;
    margin-bottom: 3.706325903em;

    }

    .right-sidebar .widget-area {

    width: 21.7391304348%;
    float: right;
    margin-right: 0;

    }

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Joel Williams

    (@joelwills)

    Automattic Happiness Engineer

    Hi there!

    You should be able to do this with CSS. These two determine the width of the sidebar and content area, so you can adjust the percentages:

    @media (min-width: 768px) {
  .left-sidebar .widget-area {
    width: 25.739%;
  }
  .left-sidebar .content-area {
    width: 69.913%;
  }
}

    Then these determine the sizes inside the content area:

    @media (min-width: 768px) {
  .single-product div.product .woocommerce-product-gallery {
    width: 41.1764705882%;
  }
  .single-product div.product .summary {
    width: 52.9411764706%;
  }
}

    As long as you increase one by the same amount you decrease another by then the divs should stay side-by-side.

    Hope that helps!

    Plugin Support Yuki K a11n.

    (@yukikatayama)

    Automattic Happiness Engineer

    Hi @dshayne,

    We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Full width on single product page’ is closed to new replies.