full width website –
-
Somehow, my website is only using like 50% of my screen width. Only the header image is fullwidth, below, the website continues in the middle with BIG blank spaces. It makes my page look very narrow.. and i have little space to play with the layouts.
Now for example this page: https://fourwaves.nl/intensieve-11-coaching/ has full-width layout.
Can anyone tell me how to change my site to using full screen width?
The blog I need help with is: (visible only to logged in users)
-
I’m using the Swell theme, which says it’s a one-column theme? Maybe thats the problem, in which case i have to change the theme.
IF SO, is there any way of saving this website, play around with different theme’s, and then, after a while, when not satisfied, going back to this set up?
-
Hi @ikpionier,
You can try out this code:
.entry-content, .entry-footer, .entry-summary { max-width: 1400px; }Let me know if that helps.
Cheers
-
Hi Elizazh,
Thanks for you help. I pasted your code to my custom CSS in wordpress, but it didn’t help.
Even when i try to build a page with SiteOrigin, it still uses the boxed width with big blank spaces on the side, leaving my almost no room to play with layout.
-
Hi @ikpionier,
Is this the website you need help with: ikpionier.nl.?
Have you saved your changes after you pasted the code? Currently this code is not on your website and the theme’s CSS code is being used which sets the width to 800px (of posts). On the home page the width is 1000px. Keep in mind that this code is for a post page, e.g. https://ikpionier.nl/pionier-de-leerlijn/.
-
I did, it’s there when i go back to it, but it doesn’t seem to affect the page.
I cant attach a screenprint, but i pasted it in the Extra CSS field.
-
-
-
-
YES! that’s it, thank you, now i can build.
Does this rule only apply the content on blogposts?
For example, on my homepage it sticks to 1000 px, which is fine. I really like the big blocks that go to both sides, like the yellow image with quote.Could you tell me how to get more of those build in a page.
AND, can i make a template, with or without SiteOrigin -
For the home page you can apply this code:
#home-content { max-width: 1400px; }You could change the number to whatever you wish, for example you could make it 100%, but I wouldn’t recommend that (it will look a bit weird on very large screens).
What else would you like to build on a page?
Honestly I am not sure if you can create a template here, maybe a member of the staff could say, but you can set it up as a post draft and then copy post whenever you need it.
-
You are being so helpfull, thank you.
So, if i build a draft for a post, can i in this post make variations in width. For example a row or a block will be 800 px wide and below there is a picture with a quote, that will ben 1400 px wide, and then there will be two columns.
-
Are you using the block editor? There on each block you could add a CSS class and then with CSS code set the width of that particular class. Something like:
.entry-content .yournewclass { max-width: 100%; } -
-
Looks like you managed already to make it 100% width but the height has messed up and you have overlapping content. It’s probably because of the max-height property you’ve put on .entry-content.
-
Thanks Elizazh! I’ve changed it back.
Starting to get somewhere. But i don’t think i get the classes right. I’ve used your css-code for the class, but i’m not getting it on any page.If i can ask another question. Is there a way to make all blocks in a row the same height, so i can end of with a clean even looking grid. Now they all jump to the size they need for the content.
-
Can you tell me on which page which blocks you’d like to be the same height so I can see if I can think of something?
-
Hi Elizazh,
Wordpress Happiness engineers instructed me towards Elementor, which i’m now using. Do you know this plugin?
Still can’t get fixed height :)
The pages i’m working on:
Elementor: https://ikpionier.nl/elementor-957/SiteOrigin: https://ikpionier.nl/kleine-mensen-fotografieles/
Both not happy with.
-
- The topic ‘full width website –’ is closed to new replies.