How can I force this WP theme to be full width - CSS?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

How can I force this WP theme to be full width - CSS?

Post by simonmlewis »

CSS Guru needed as completely stuck.

http://greatives.eu/themes/blade-v2/shop/
This is a theme we are using, but I cannot see any means in CSS of making it go 80 or 90% width. There is always that big gap either side.
I can set it to show three across and the images go bigger.

The idea is that we keep 4 across but put in the side menu.

Can anyone see the easy CSS to add to make the body part go full width?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How can I force this WP theme to be full width - CSS?

Post by Celauran »

At a glance, it looks like class grve-content has a max width of 1170px.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How can I force this WP theme to be full width - CSS?

Post by simonmlewis »

If I add:
. grve-content { max-width: 1900px !important; }
or
#grve-content { max-width: 1900px !important; }
It makes no difference. :(
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How can I force this WP theme to be full width - CSS?

Post by simonmlewis »

Yesterday I wrote this:

Code: Select all

@media only screen and (min-width: 1230px) {
    
.woocommerce div .product
{
    max-width: 1300px!important;
    margin-left: auto;
    margin-right: auto;
}

#grve-single-post-meta-bar
{
 max-width: 1300px!important;
margin-left: auto;
margin-right: auto;   
}
#grve-related-products
{
max-width: 1300px!important;
margin-left: auto;
margin-right: auto;
}

.grve-wrapper .related .products
{
max-width: 1300px!important;
margin-left: auto;
margin-right: auto;
}

body .archive .grve-container,#disqus_thread,#grve-content.grve-left-sidebar .grve-content-wrapper,#grve-content.grve-right-sidebar .grve-content-wrapper
{
    max-width: 1700px!important;
}

body .archive #grve-content, .grve-single-wrapper, #grve-main-content .grve-section
{
    margin-right: 20px;
    margin-left: 20px;
}
}
Trouble is, it affects ALL pages. Even with that second-to-last class:

Code: Select all

body .archive .grve-container,#disqus_thread,#grve-content.grve-left-sidebar .grve-content-wrapper,#grve-content.grve-right-sidebar .grve-content-wrapper
{
    max-width: 1700px!important;
}
... which I thought would affect only the .archive classed pages, like categories. But it affects the homepage too.
I need it to only affect category, shop and product pages.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply