full width website –

• 

  ikpionier · Member · Feb 6, 2019 at 7:21 am

  • Copy link
  • Add topic to favorites

  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)

• 

  ikpionier · Member · Feb 6, 2019 at 7:43 am

  • Copy link

  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?

• 

  elizazh · Member · Feb 6, 2019 at 2:12 pm

  • Copy link

  Hi @ikpionier,

  You can try out this code:

  .entry-content, .entry-footer, .entry-summary {
      max-width: 1400px;
  }

  Let me know if that helps.

  Cheers

• 

  ikpionier · Member · Feb 7, 2019 at 8:10 am

  • Copy link

  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.

• 

  elizazh · Member · Feb 7, 2019 at 8:57 am

  • Copy link

  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/.

• 

  ikpionier · Member · Feb 7, 2019 at 9:24 am

  • Copy link

  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.

• 

  ikpionier · Member · Feb 7, 2019 at 9:26 am

  • Copy link

  Yes, thats the website, btw :)

• 

  elizazh · Member · Feb 7, 2019 at 9:26 am

  • Copy link

  Yes, please attach a screenshot.

• 

  ikpionier · Member · Feb 7, 2019 at 9:50 am

  • Copy link

  link

• 

  elizazh · Member · Feb 7, 2019 at 9:53 am

  • Copy link

  I think you are missing the “.” symbol before entry-content. Could you try with that?

• 

  ikpionier · Member · Feb 7, 2019 at 10:05 am

  • Copy link

  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

• 

  elizazh · Member · Feb 7, 2019 at 10:23 am

  • Copy link

  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.

• 

  ikpionier · Member · Feb 7, 2019 at 10:29 am

  • Copy link

  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.

• 

  elizazh · Member · Feb 7, 2019 at 10:34 am

  • Copy link

  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%;
  }

• 

  ikpionier · Member · Feb 7, 2019 at 11:46 am

  • Copy link

  I’m trying to, but it’s not working yet to get blocks to fill up the whole width.

• 

  elizazh · Member · Feb 7, 2019 at 3:52 pm

  • Copy link

  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.

• 

  ikpionier · Member · Feb 11, 2019 at 7:48 am

  • Copy link

  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.

• 

  elizazh · Member · Feb 11, 2019 at 10:38 am

  • Copy link

  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?

• 

  ikpionier · Member · Feb 11, 2019 at 12:40 pm

  • Copy link

  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.

• 

  ikpionier · Member · Feb 11, 2019 at 12:47 pm

  • Copy link

  Sorry, new links for the elementor page
  https://ikpionier.nl/kleinemensen-fotografie/