full width website –

  • Author
    Posts
  • #3262987

    ikpionier
    Member

    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 ikpionier.nl.

    #3262993

    ikpionier
    Member

    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?

    #3263217

    elizazh
    Member

    Hi @ikpionier,

    You can try out this code:

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

    Let me know if that helps.

    Cheers

    #3263683

    ikpionier
    Member

    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.

    #3263701

    elizazh
    Member

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

    #3263714

    ikpionier
    Member

    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.

    #3263716

    ikpionier
    Member

    Yes, thats the website, btw :)

    #3263717

    elizazh
    Member

    Yes, please attach a screenshot.

    #3263742

    ikpionier
    Member
    #3263746

    elizazh
    Member

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

    #3263761

    ikpionier
    Member

    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

    #3263773

    elizazh
    Member

    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.

    #3263779

    ikpionier
    Member

    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.

    #3263782

    elizazh
    Member

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

    ikpionier
    Member

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

    #3263944

    elizazh
    Member

    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.

    #3265661

    ikpionier
    Member

    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.

    #3265726

    elizazh
    Member

    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?

    #3265768

    ikpionier
    Member

    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.

    #3265770

    ikpionier
    Member

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

You must be logged in to reply to this topic.