Adjusting Individual Page Width Using CSS

Support
#1

Heya,
I’m developing an eCommerce store for a client. The Woocommerce page widths are excessive while the main page width is perfect. I think the solution is to adjust global page width but target the main page with CSS. The site is developed in Pro Theme.

I’ve seen code for X theme, though none work thus far. Can you provide a code for Pro Theme? The page id is 10.

#2

Hi @chadfahlman,

Thanks for writing in.

Would you mind sharing us the URL that you want to adjust and a screenshot or image of what you want to achieve so that we could easily know what code to give or what is the best customization.

Let us know how it goes.

Thanks. :slight_smile:

#3

Sure. I want the main page to have 100% width and Woocommerce shop pages to have 95% width.

#4

Hi @chadfahlman,

Please share us your URL to check your setup further if it the right code to share. So we could prevent sharing the wrong code.

Thanks.

#5

Sure thing. It’s under construction and appearance may change while viewing.

#6

Hey Chad,

You’re using the Default page template for your home page. Please use the Blank No Container | Header Footer. Please see https://theme.co/apex/forum/t/meta-options-pages/144 for more details.

Thanks.

#7

Thank you,
Can you provide the CSS to target that page? The page ID is 10.

#8

Here is the current CSS.

//Page width.
.x-main.full {
max-width: 1500px;
width: 100% !important;
margin-left: auto;
margin-right: auto;
}

#9

The page class is page-id-10. You can append that to your current selector like this .page-id-10 .x-main.full

Hope that helps.

#10

No dice. I’m fairly certain that I have the correct page ID. I’ve tried adding that code to global CSS and page CSS (not simultaneously).

#11

Hi there,

Are you trying to adjust the page width of the shop page here?

If so, please try this selector: .woocommerce.archive .x-container.width

In case you are referring to another page, please provide us with the direct link to that page.

Also kindly double check the CSS codes you have and make sure that there are no CSS errors.

#12

I want all woocommerce pages to have 95% width.

#13

Hi there,

That should be:

.woocommerce .x-container.width {
    width: 95%;
}

Hope this helps.

#14

No such luck. :sunny:

#15

Hi,

Please change all comment from // to /* */

Then try adding !important

Change this

// Post width.  
.single-post .x-main {
width: 90% !important;
margin: auto;
float: none;
}

// Remove post feature image.  
.single-post .entry-featured {
display: none;
}

// Shop header.  
.woocommerce .x-header-landmark {
display: none;
}

// Overflow. 
body .x-colophon div {
overflow:visible;
}

// Woocommerce width and 
// category titles. 
.woocommerce .x-container.width {
    width: 90%;
}

.post-type-archive {
    text-align: center;
}

to this

/* Post width.  */
.single-post .x-main {
width: 90% !important;
margin: auto;
float: none;
}

/* Remove post feature image.  */
.single-post .entry-featured {
display: none;
}

/* Shop header.  */
.woocommerce .x-header-landmark {
display: none;
}

/* Overflow.  */
body .x-colophon div {
overflow:visible;
}

/* Woocommerce width and */
/* category titles. */
.woocommerce .x-container.width {
    width: 60% !important;
}

.post-type-archive {
    text-align: center;
}

Hope that helps

1 Like
#16

Aha! That fixed it. Very well done, sir.

I’m familiar with languages that use // to distinguish between notes and code. Thank you for pointing out such a silly error.

#17

You’re welcome.

#18

Why are all the PRO answers X answers? What is the benefit in purchasing PRO?

Greg

#19

Hey Greg,

I’m sorry but I don’t understand your question:

To your question:

Pro has a header and footer builder.

Thanks.

#20

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.