Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 16, 2016 at 11:36 pm #673426
    BirgitteAlstrom

    In one section I want two columns.
    Left column with an image going full width to the left and ending on the middle of the page to the right.
    Right column with text NOT going full width to the right.

    I have followed the suggestions in http://kriesi.at/documentation/enfold/color-section-with-100-container/ , which makes both of the columns full width, but I only want the left column full width.

    Any suggestions?

    August 18, 2016 at 5:48 am #674021
    Rikard

    Hi BirgitteAlstrom,

    I’m not sure if that would be possible but send us a link to the page in question and we’ll have a look at it.

    Thanks,
    Rikard

    August 18, 2016 at 8:45 am #674087
    BirgitteAlstrom

    Thanks. Links are now sent as private content.

    August 19, 2016 at 8:17 am #674573
    Rikard

    Hi,

    Please try the following in Quick CSS under Enfold–>General Styling:

    .page-id-19 .avia-builder-el-3 {
    padding-right: 10%;
}

    Thanks,
    Rikard

    August 19, 2016 at 8:50 am #674594
    BirgitteAlstrom

    Great, it worked. Thank you so much.

    What if I have a few more pages, where I want the same structure? Is there a way to write it more smoothly?

    Right now I in Quick CSS under Enfold–>General Styling have these two commands for just one page (first sentence to ensure left image is fullwidth, second sentence to ensure right column is not fullwidth in the same section):

    —

    #fullwidthsection .container { width: 100% !important; max-width: 100%; padding: 0; margin: 0; }

    .page-id-19 .avia-builder-el-3 {
    padding-right: 10%;
    }

    —

    So I guess my questions are:
    1) Could it be written more smoothly to cover one page?
    2) How to write it to include a few other pages as well?

    August 20, 2016 at 7:37 am #674955
    Rikard

    Hi,

    Yes, I guess there is. Try activating the custom CSS field for builder elements: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/. You can then assign a class to the element and replace the code I gave you with the following: 

    .your-custom-class {
padding-right: 10%;
}

    Best regards,
    Rikard

    August 20, 2016 at 11:54 am #674991
    BirgitteAlstrom

    Thanks, Rikard. I tried to write everything in one sentence and it seems like it worked.

    #fullwidthsection .container { width: 100% !important; max-width: 100%; padding: 0; padding-right: 10%; margin: 0; }

    August 21, 2016 at 12:13 pm #675305
    Rikard

    Hi,

    Thanks for the feedback, glad you found a solution which works for you :-)

    Please let us know if you should need any further help on the topic.

    Best regards,
    Rikard

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