[Gazette] Increasing post width CSS, reducing widget and left footer

  • Unknown's avatar
    giacomoromanini · Member ·

    Hi, I’m new to CSS.
    I’m trying to expand the central column, reducing the right widget and the left footer.

    This is the best I’ve done, but the content only moves rightwards, I cannot make it expand both left and right.

    .single .widget-area {
    max-width: 200px;
    width: 100%;
    }
    .single .site-main {
    max-width: 1061px;
    width: 100%;
    }
    .single .entry-footer {
    max-width: 150px;
    width: 100%;
    }

    @media screen and (max-width: 1379px) {
    .single .widget-area {
    max-width: 100%;
    width: 100%;
    }
    .single .entry-footer {
    max-width: 100%;
    width: 100%;
    }
    }


    EXTRA: is there a way to include pictures bigger than the content width, e.g. as The New York Times does?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    craiglcnt · Member ·

    Hi there,

    Thanks for reaching out, I’d be happy to help! Let’s try making some changes to your css to get the changes you’d like to achieve in your page styling.

    To expand the central column, you can try adjusting the width and margin properties of the main content area. For example, you could set the width of the main content area to be larger and the margin to be zero to expand the central column.

    .single .site-main { width: calc(100% – 400px); margin: 0; }

    To reduce the right widget and left footer, you can set the width of those elements to be smaller and adjust the margin or padding accordingly.

    .single .widget-area { width: 200px; } .single .entry-footer { width: 150px; }

    Regarding images bigger than the content width, you can use CSS to make the image responsive while keeping its aspect ratio. You can achieve this by using the max-width property and setting it to 100% so that the image will shrink to fit the container when the viewport width is smaller than the image width. Additionally, you can use the object-fit property to control how the image is displayed within its container.

    img { max-width: 100%; object-fit: cover; }

    Hope this helps! If any further assistance is needed, please let me know, I’d be happy to help!

  • Unknown's avatar
    giacomoromanini · Member ·

    Thank you @craiglcnt !

    I’m trying your suggestions, let me make sure I understand: the “minus” in
    .single .site-main { width: calc(100% – 400px); margin: 0; }
    controls how much left the central column goes, right?

    I managed to move it where I think it should left, but it does not expand overall, it just shifts to the left. What am I doing wrong?

  • Unknown's avatar
    craiglcnt · Member ·

    Hi Giacomoromanini,

    The “minus” in “.single .site-main { width: calc(100% – 400px); margin: 0; }” manages how wide your content is and how it is displayed across various screens. Essentially it sets the content to 100% of the width of the viewer’s screen minus 400px. Let’s assume I have a screen that is 1920px wide, the content will be displayed at 1920px – 400px in order to have some spacing on the sides. You can also accomplish this by adding a margin of a certain amount, but this would add more spacing than needed and that’s why it was set to 0. It’s important to note that margin also affects the top and bottom spacing, so you might want to be specific if using that opting by using margin-left and margin-right to get the specific spacing you require.

    I have added some CSS code below which might help you to accomplish the look you want, let me know if this helps. Also if you need any more help with this, let me know I’d be happy to help!

    .archive .content-area {
    width: 90%;
    }

    .site-main {
    width: 75%;
    }

    .page .widget-area, .single .widget-area {
    border-left: none;
    }

  • Unknown's avatar
    giacomoromanini · Member ·

    Hi craiglcnt,

    thank you again. Unfortunately, none of the above or else I tried worked. I guess we should change the baseline specs of the theme: https://wordpress.com/theme/gazette/

    1. The main column width for posts is 540.
    2. The main column width for pages is 870.
    3. A widget is 270 wide.
    4. Featured Images are 1920 wide by 768 high.

    I tried to find where, even with the inspector, but couldn’t find it. Any help is more than welcome!

  • The topic ‘[Gazette] Increasing post width CSS, reducing widget and left footer’ is closed to new replies.