- Issue created by @PROMES
- Status changed to Fixed
about 2 months ago 4:27pm 21 July 2024 - 🇺🇸United States flashwebcenter Austin TX
Hello,
To change the width of a specific page or all content within a content type programmatically, follow these steps:
Identify Classes in the Body Tag
The body tag contains useful classes:
- A class for the content type.
- A class for the node ID.
Change Width for a Specific Node
- Inspect the Page: Inspect the page to find the node ID class in the body tag.
- Use the CSS Below:
.path-node-123 #page-wrapper>.solo-outer>.solo-inner:not(.primary-sidebar-menu-inner, .page-node-type-pb-content .main-container-inner) { max-width: 1024px; }Replace
123with the specific node ID.Change Width for All Content in a Content Type
- Inspect the Page: Inspect the page to find the content type class in the body tag.
- Use the CSS Below:
.page-node-type-article #page-wrapper>.solo-outer>.solo-inner:not(.primary-sidebar-menu-inner, .page-node-type-pb-content .main-container-inner) { max-width: 1024px; }Replace
articlewith the specific content type.Adding CSS
You can add the CSS either:
- In the theme settings under CSS injection.
- To a sub-theme if you have one.
Change Width from Theme Settings
- Enable the Feature: I have added a new feature to the theme settings in Dev.
- Set Width for Each Content Type: After enabling the feature, you can set the width for each content type.
- Set Width for Each Node: After enabling the feature, a field will be added to each node. You can set the width for the page when you edit it.
Best wishes,
Alaa - 🇳🇱Netherlands PROMES
Alaa, thanks for, as always, the quick response, examples and for adding the configuration options.
I am trying to adjust the width of a views page. With the above instructions it does not work. My mistake?
Of course, I have cleared the caches after changing the css file.
The body line:
<body class="toolbar-icon-10 toolbar-loading views-page path-view-gastenboek user-logged-in path-gastenboek">
My css in the subtheme:@media (min-width: 800px) { .path-view-gastenboek #page-wrapper>.solo-outer>.solo-inner:not(.primary-sidebar-menu-inner, .path-gastenboek .main-container-inner) { max-width: 800px; } } - 🇺🇸United States flashwebcenter Austin TX
Hello,
Thank you for your kind words. Please use this code:
@media (min-width: 800px) { .path-gastenboek #page-wrapper>.solo-outer>.solo-inner:not(.primary-sidebar-menu-inner, .page-node-type-pb-content .main-container-inner) { max-width: 800px; } }If you use this code and it still doesn't work, here are a few things to check:
- Ensure CSS is Loading: Confirm that your CSS file in the subtheme is being properly loaded. You can do this by checking the page source or using the browser's developer tools.
- CSS Specificity: Make sure your CSS selectors are specific enough to override any existing styles. For instance, try using a more specific selector:
.path-gastenboek { width: 600px!important; } - Check Subtheme Configuration: Ensure your subtheme is set up correctly and the CSS changes are being applied. Sometimes, issues can arise if the subtheme isn't configured properly.
- Browser Cache: Besides clearing Drupal caches, try clearing your browser's cache or using an incognito window to ensure you're seeing the latest changes.
- Inspect Elements: Use your browser’s developer tools to inspect the element and see if your CSS is being applied or overridden by other styles.
Best wishes,
Alaa - 🇳🇱Netherlands PROMES
I changed max-width: 800px; into max-width: var(--solo-px800);
Now it works. Thanks. Automatically closed - issue fixed for 2 weeks with no activity.