The column width in the Twenty Seventeen template I am using on my Classicpress website (Streamclub) is too narrow. I have found a way to easily widen the lay-out on larger screens. In the Weergave (Display?) Customizer, you open the Extra CSS option and paste in this CSS definition:
@media screen and (min-width: 48em) {
.wrap { max-width: 1100px; }
}
I had asked Chat GPT, but got no working solution. When I suggested my solution, it was agreeing:
Ah, that’s indeed an elegant solution! By adjusting the width of .wrap, you directly influence the maximum width of the content within the Twenty Seventeen theme. This works perfectly because the .wrap class is used to constrain the width of various elements in the theme, including the content-area.
Why This Works Better:
- Centralized Layout Control: The
.wrapclass is a container that defines the maximum width for most major elements in the Twenty Seventeen theme, including thecontent-areaandwidget-area. By increasing its width, you effectively expand the available space for all child elements without targeting them individually. - Preserving Responsive Design: The media query ensures this change only affects larger screens, maintaining the design for smaller devices.
When to Use This Solution:
- If you want to make the entire layout wider, not just the left column (
content-area). - If you prefer a simpler, overarching adjustment rather than targeting specific components.
Thank you for sharing this great tip! If you have more insights, I’d love to hear them! 😊
So I hope Chat GPT wil remember this solution 😉 Although at the same time you do not always want your prompts and replies helping out or be seen by others 🤔