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

Home Forums Support How to set exact pixels in content/sidebar width?

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #440635
    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

    GeneratePress 1.4
    GP Premium 1.5.5
    #440773
    Leo
    Staff
    Customer Support

    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?

    #440782
    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

    #440854
    Leo
    Staff
    Customer Support

    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!

    #441011
    LoGP

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

    #441014
    Tom
    Lead Developer
    Lead Developer

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

    #441418
    LoGP

    Oke, I’ve added the website 🙂

    #441654
    Leo
    Staff
    Customer Support

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

    #441791
    Tom
    Lead Developer
    Lead Developer

    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.

    #442340
    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

    #442366
    Tom
    Lead Developer
    Lead Developer

    Glad you got something working 🙂

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.