Shop columns help

[Ruan Deyzel]

Hey there, please have a look at my single product page. I set the column layout through custom css to be 25% and 75%. This is the layout I want, but it seems to be a global style and is messing with other 3 column layouts on the site ie. the homepage’s 3 call to actions at the top. Is there a way that I can style my individual products as it is now, to only target those pages and not the rest of the site? Also, related products at the bottom chops off the last product. Some help would be much appreciated. Thanks

[Ruan Deyzel]

This reply has been marked as private.

[Kyle – SUPPORT]

Hi

Please remove this from your custom css:

.col-sm-4 {
    width: 25%;
}

.col-sm-8 {
    width: 75%;
}

– Kyle

[Ruan Deyzel]

Hi Kyle, as I’ve mentioned – the 25% 75% is the layout I want for the single product page. If I remove it it’s 3 1/3 columns (which is default). The layout I want should be 1/4 – 3/4, but as I’ve also mentioned it’s a global style. What I’m asking is how can I allow 1/4 3/4 layout for only a single product and not for the entire site?

[Kyle – SUPPORT]

But I can see now that your single product page is not 25% 75% it’s the default (with sidebar)

If you want it to be 1/4 3/4 then add this custom css:

.woocommerce div.product div.images {
  width: 28%;
}
.woocommerce div.product div.summary {
  width: 68%;
}

– Kyle

[Ruan Deyzel]

Thanks Kyle, but the sidebar needs to be 25% like the main shop categories not 33%. If I change the css of the sidebar:

.sidebar.left-sidebar {
    width: 25%;
}

there is a slight gap between the sidebar and the product image. Any suggestions to get this layout right? Appreciate the help

[Ruan Deyzel]

It has to fit exactly like this layout

[Kyle – SUPPORT]

Looks pretty spot on to me (see screenshots)

– Kyle

[Ruan Deyzel]

Hi Kyle, YES! That’s what I’m saying 🙂 What doesn’t look spot on (as previously mentioned) is what the columns are doing to other page layouts ie. the home page, the 3 columns under the revolution slider and the blog layout under news is set to 3 columns, it has 4 ….

[Kyle – SUPPORT]

You can’t have this code is your custom css:

.col-sm-4 {
    width: 25%;
}
.col-sm-8 {
    width: 75%;
}

The whole theme is structured using these classes, if you edit the widths it’s going to apply globally. Please remove it. When you have removed it I will give you the correct css (originally I thought you meant the image and the summary, not the sidebar, apologies)

– Kyle

[Ruan Deyzel]

Cool, removed! I left it for you to see the layout 🙂

[Kyle – SUPPORT]

Try this:

aside.sidebar.col-sm-4 {
  width: 25%;
}
.single-product article.col-sm-8 {
  width: 75%;
}

– Kyle

[Ruan Deyzel]

Legend! Thanks Kyle

[Kyle – SUPPORT]

No problem 🙂

– Kyle