Boxed Layout Not Appealing

Hi, this is not so much for UF builder as it is for the UF theme.

How do I get rid of the white space that users can scroll to, all the way to the right of the screen? This could be potentially ugly to whoever notices this huge mass of white space that has no purpose or function? Is there a way I can reduce this white space to the right of my layout or would I have to change my whole layout? I don't have much time till I see my client, so would appreciate it if I could get this fixed before tomorrow's meeting.

I also noticed that the header and content sections are boxed, while the footer and the CTA (call-to-action) are 100% wide. How do I make my current layout 100% wide without affecting the order of things such as the (already) perfect nav menu?

  • Predrag Dubajic

    Hey Caleb,

    White space on right side is caused by the triangle above the footer, the border with of 1080px to be exact.
    I would suggest removing that element completely and use different approach by using 1920px image that has that triangle and then create separate region for the triangle where you will set that image as region background.

    I also noticed that the header and content sections are boxed, while the footer and the CTA (call-to-action) are 100% wide. How do I make my current layout 100% wide without affecting the order of things such as the (already) perfect nav menu?

    All your regions are 100% in width but only in your footer you have background images for the regions, that's why above content looks narrower.

    Content in themes is actually set to 1080 pixels and that's the space where elements can be added, if you check your footer content you'll that it's also inside those 1080 pixels as you can see here:

    In order to change content width you will need to edit your theme in BUILDER and in theme settings change Grid Width to 80 like this:

    I strongly suggest making a backup of your theme before making this change as it can affect look of your site in a way you don't want.

    Best regards,
    Predrag

  • Predrag Dubajic

    Hi Caleb,

    I had a look at your setup now and can see that you don't have any child themes on your site, do you have Upfront theme active and making changes directly to parent theme?
    Parent theme is not supposed to be used this way and you should have child theme created where all the changes should be made.
    This is most likely why you're seeing that update notification as well.

    My above solution will not work since that's for Builder and child themes.

    I strongly suggest creating a child theme as soon as possible and doing your changes there.

    Best regards,
    Predrag

  • Predrag Dubajic

    Hi Caleb,

    I've attached child theme with header configured, there are couple of things to consider here before continuing with any changes:
    - This child theme now has full screen content holder, you will see scroll bar on the bottom once you go into UF editor/builder and you'll need to use it to access UF options that are on the end of screen.
    - Because of full width content your elements will also stick to edge of screen, you can resize them to get them to your desired position, I suggest activating grid to better see where middle of your page is.
    - Once you activate this child theme you won't be able to activate Upfront parent theme again since it's hidden from your active themes, after deactivating WPMU DEV Dashboard you will see UF parent theme again.
    - Since UF parent theme is not supposed to be edited (that's why it's hidden from available themes) I'm not sure how changes to child theme would affect your current changes to UF parent in case you want to switch back.
    My suggestion is to create a backup of your current site state before continuing.

    Best regards,
    Predrag

  • caleb.mkdaman

    Thank you so much Predrag! You saved me a lot of time and headache...:joy:

    I recreated it on another web address (yes, again, sorry!) and it looks good, 'cept I noticed it's already 80 in terms of column width! However, there IS a scroll bar below as you correctly pointed out, but how do I get it (the dimensions and proportions) to look like the website at Before I changed to the UF child theme provided by Predrag

    Any help would be genuinely appreciated so I can go about creating a layout that is as consistent (dimensions/structure and width-wise) as it is minimalist (design-wise). Thank you very much in advance.

    Because now the grid has already been set, but I've no idea how to reduce the screen real estate to being wide enough, yet also contained at the very same time, as per the previous website mentioned in the link above...

  • Predrag Dubajic

    Hi Caleb,

    In order to have full width content the grid needs to be stretched to full width like this, when you want to have elements in the middle you can grab them by edges and resize it to desired width, here's an example of that:
    https://screencast.com/t/nXqn2P9nR

    I've also attached another child theme below, this one uses 1080px content width and there's a CSS "hack" that expands header only, so you can give that a try and see which solution you like better.

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.