-
Posts
-
Hi, is it possible to use different widths for different elements on pages?
I’d like to have a width of approx. 960px for my website in general. So I’ve set this in the Enfold’s layout settings. This width is usable for:
– Menu’s (primary, secondary)
– Featured image (in case it’s visible at the top of a single post)
– Grid elements (like post grids etc)
– FooterHowever, for the text content I’d like to have a more readable width of approx. 720px. This width is more suitable for:
– Content, text
– FormsSo: what is the best/easiest way of playing with different widths for certain parts of a page?
PS For static pages I use Enfold’s Page Builder. However, for single blog posts I use the default editor (not the Enfold’s Page Builder).
Hey Marc,
Thanks for your question, unfortunately we don’t have a built in way to specify element widths, typically the width is a percentage of the content width at Enfold Theme Options ▸ General Layout ▸ Dimensions ▸ Content | Sidebar Ratio
So you could try adjusting these two options, if this doesn’t give the control you wish, we could help with so CSS that can set the max-width of certain elements.
If you would like this please link to a couple of pages with the elements for us to examine.Best regards,
MikeHi Mike, thanks for reaching out!
Unfortunately I can’t share links, since the website is behind a ‘coming soon page’. But here are 2 screenshots.
This is a page where the width should be approx. 960px: https://snipboard.io/KmrIfh.jpg
This is a page where the width of the content should be approx. 720px: https://snipboard.io/6mBX20.jpg But other elements, like featured image, may be title too, should be approx. 960px.
It’s a bit like you can see at the Dutch news site NOS:
This page has some grids and is wide: https://nos.nl/sport While this page has narrow text sections, and some wider image sections: https://nos.nl/artikel/2493312-de-wereldtitel-van-de-overmacht-het-seizoen-van-verstappen-in-vijf-momenten
But for now: my website needs to be ready and live tonight, so I’ll stick with a general width for the whole site.
If you can point me in some direction how to achieve what I want, I might give it a try in one of next weeks.
Cheers,
MarcHi,
Thanks for the screenshots, it looks like the page you want to be 960px is the blog page, and I assume other pages, so I recommend settings the site content width to 960px at Enfold Theme Options ▸ General Layout ▸ Dimensions ▸ Content | Sidebar Ratio.
Then it looks like a single post is the page you want to be 720px, I would achieve this will css like trying this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:#top.single-post .fullsize .template-blog .post .entry-content-wrapper { max-width: 720px; } #top.single-post .av-content-full > .related_posts { max-width: 720px; } #top.single-post .av-content-full > .comment-entry { max-width: 720px; }Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.
This css assumes that the single post is created with the default editor, and your settings are similar to my demo site, unfortunately there are so many settings that to give to an exact solution I will need to see your page. You could include a admin login in the Private Content area below, or we could wait until your site is live.Best regards,
MikeWow, that’s just fab!
Just tried it and it seems to do the job!Thank you very much, Mike; you just made my day! :-)
Please mark this as solved
Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike
- The topic ‘Different widths for different elements on pages?’ is closed to new replies.