Layout: Align full-width section data with boxed section size

  • Resolved MadnessMedia

    (@madnessmedia)


    2 years, 11 months ago

    Hi guys,

    I have a layout-related question. I have a section with 2 columns. The one column has a background color, I need this background color to fill the full screen (full-width layout) but the content inside the column to only be as wide as the website boxed width.

    Setting the section to use full-width layout it also stretches the content full width. Setting the section to use boxed layout also box the background color. I tried setting the section to use boxed layout but with ‘stretch section’ on, and it does not do anything, the section still just looks boxed.
    Please see an illustration image here: https://ibb.co/sWBSBG1.

    Any ideas or help on how to achieve this would be much appreciated.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi,

    If you use the site settings and set the background colors so it covers all the page and then changes the section background so you have two different backgrounds, one for full width and one for boxed, will that fit your needs?

    My apologies if I did not understand correctly.

    Thread Starter MadnessMedia

    (@madnessmedia)

    I found a solution.

    1. Add a section with 2 columns. Change the section to full width layout. Add your background color or background image to the column you want.
    2. Add an inner section with 2 columns inside each of the full width section columns. On each inner column of the inner sections add a custom class with your site width divided by 2. E.g., my site width is 1300px so I add a css class to each inner column with 650px as width.

    .my-full-half-section{
    width:650px!important;
    max-width: 650px!important;
    min-width: 650px!important;
    }

    The outer columns of the inner columns will act as a margin an keep the column data inline width the website boxed width on any screen size.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Layout: Align full-width section data with boxed section size’ is closed to new replies.