Home Forums Community Forum 100% Width Rows with Boxes Content… How?

Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.

Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • orangebackpack
    Participant
    Post count: 3

    I’m seeking to create a row that has 100% width, with 2 columns, whose background images fill up the entire screen but whose content still lines up with boxes content. Avada can either do 100% width, or boxes content… not exactly both when working with more than 1 column.

    See image… https://ibb.co/1GR5VbV
    The backgrounds (color and image, respectively) for each column would extend, but the alignment of the orange line would stay the same.

    Is there a way to do this?

    marklchaves
    Participant
    Post count: 141

    Thanks for providing a screen capture.

    You mean something like this?

    https://marklchaves.com/full-width-test/

    I set my page width to be 100% (not site width). I set my row width to be 100%. I have two columns at 50%.

    orangebackpack
    Participant
    Post count: 3

    Thank you for engaging! No. I need something where the page width is 100%, the row is 100%, but the content inside is set to site width…. Something more like: https://ibb.co/gSGYRNh

    – Text is set to site-width
    – Backgrounds of columns extend out to 100%

    marklchaves
    Participant
    Post count: 141

    Ah. Sorry for being slow on the uptake. Thanks for clarifying.

    I hope this is closer to what you are looking for.

    https://marklchaves.com/full-width-test/

    The way I understand Avada is that rows are always full width. But, you can tell a row to make its contents inside to be full or site width. You can specify this inside the row settings. You probably already know that.

    In my example.

    Row 1 has site width contents.

    Row 2 has full width contents.

    I forced the background color of Row 1 to be white to accentuate the difference. Here’s that CSS.

    
    .test-bg-color {
      background-color: #ffffff !important;
    }
    .dark-text {
      color: #000000 !important;
    }
    

    Still not 100% sure if I got what you are asking. But, hopefully it gives you something to work with. Leave me a comment on my example page if you have more specific questions. I can post the final result back here later if needed.

    Thanks!

Viewing 4 posts - 1 through 4 (of 4 total)
Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.