Products Design Element Full Width

[jefflogo]

I am using design element “products” and have it set to show latest 6 products of a particular category.

The first 4 products show on the first row and the last two how on 2nd row. it looks like the design element is saving room for a sidebar. How do I get this design element to display full-width? Tried putting it in ‘full width row’ but that didn’t work. The Site/page URL illustrates the issue I’m referring to.

[David Martin – Support]

Hi Jeff,

Unfortunalty, a full width PB asset is not possible within a portfolio item content.

Thanks,
David.

[jefflogo]

Is there a template I can modify to make this happen? which template does it use? What is supposed to go in that space anyway? why is it there?

[David Martin – Support]

You would need to work with a developer. Broadly speaking, the template is single-portfolio.php. However there are container classes limiting the width, to breakout of this would all all portfolio content to be fullwidth.

[jefflogo]

That’s exactly what I want, the entire portfolio to be full width. If you have a link to which container classes are involved, or any other tips besides the template name, please let me know. thanks

[David Martin – Support]

Try adding this to Theme Options => Custom CSS

.single-portfolio .container {
    margin-right: 15px;
    margin-left: 15px;
    width: 98%!important;
}

[jefflogo]

I still couldn’t get it full width with mini-products, so I just set to standard size. if you have tips for mini, let me know. otherwise, please close.

[David Martin – Support]

Please feel free to create a test page and we can help you further.

Thanks.

[jefflogo]

This reply has been marked as private.

[David Martin – Support]

Sure, please test adding this Theme Options => Custom CSS:

.product_list_widget.products-mini.woocommerce.spb_content_element.span12.artist-products {
    width: 98%;
}
body .has-no-sidebar .products-mini ul.products li.product {
    width: 14.5%;
    clear: none;
}
@media only screen and (min-width: 1200px) {
body .has-no-sidebar .products-mini ul.products li.product {
    width: 14.5%;
    clear: none;
}
}

[jefflogo]

that worked! thanks.

[Rui Guerreiro – SUPPORT]

Great. Thanks David.

-Rui

[jefflogo]

This reply has been marked as private.

[David Martin – Support]

Marking as resolved.

Thanks.