[Resolved] How to set exact pixels in content/sidebar width?

[LoGP]

Hi

1) How do I set my content width exactly at 600px and sidebar at 300px? (what should be my container width and what should be the percentage of my sidebar?).

This sidebar width in percentages doesn’t really make sense to me…

2) How do I set different spacing between the content and the sidebar? I want to adjust the spacing between my content area and the right sidebar, without adjusting the spacing between my sidebar widgets.

Not sure why you only let the user set a unified spacing.

Thanks,
L

[Leo]

Hi there,

1) That depends on what your setting is currently the content padding. Can you link me to the page?

2) We would need to use CSS for that. Can you link me to the page?

[LoGP]

Hey Leo,

Thanks for the response.

1) I’m using GP on a test environment. Considering all padding and width settings are set to the theme’s default settings, how would I go about setting the content to 600px and sidebar to 300px?

2) I see. I’m coming from Genesis with Dynamik Website Builder which allows you to change that in the settings. I thought I could do the same with GP without customising the CSS.

Cheers
L

[Leo]

Are you able to duplicate the site on a live server? It will be much easier for me to help other than just guessing.

Is the px number including padding etc?

Thanks!

[LoGP]

How can I send you a link without other users seeing it?

[Tom]

If you edit your first post in this topic, you’ll see a website URL field.

[LoGP]

Oke, I’ve added the website 🙂

[Leo]

Does the 600px and 300px include the padding or no?

[Tom]

We use percentages as it makes the website responsive. If you set fixed values, your website won’t be responsive.

You could try using calc, which is supported in modern browsers:

.sidebar.grid-30 {
    width: 300px;
}

.right-sidebar .content-area.grid-70 {
    width: calc(100% - 300px);
}

You can increase the 300px in the calc() to increase the spacing between the content and sidebar.

[LoGP]

The code you provided worked, but was not ideal when resizing the browser screen.

I did it a bit different, for those who like to do the same:

I set my right sidebar on 30%.

30% is 300px so 70% is 700px.

Set my container width to 1000px (300 + 700).

Played with the padding until I got my content area around 600px.

Cheers
L

[Tom]

Glad you got something working 🙂

[Author]

Posts