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

Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • orangebackpack
    Participant
    July 11, 2019 at 6:03 pm
    Post count: 4
    #629860

    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
    July 12, 2019 at 7:35 am
    Post count: 873
    #629989

    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
    July 12, 2019 at 1:34 pm
    Post count: 4
    #630076

    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
    July 13, 2019 at 12:09 am
    Post count: 873
    #630218

    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!

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.