Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • September 24, 2019 at 6:25 pm #1141511
    jonrouse

    Hi,
    I am trying to match a visual supplied to me from another designer. Although some sections are different to what I’m used to doing in Enfold, I’m convinced that it can be done in Enfold with a little CSS.

    If you look at the link in the private area, you can see the homepage I am currently working on. They want a easy slider to be full page width, with a column overlapping the sider. Now, I have sort of been able to do this, but it only works when I look at the preview. When I look at the published version of the page, it goes back to the conventional view. There’s also a link to a screen grab of the previewed version of the site in the private area.

    The way I did this is created a grid row with a 2/3 and 1/3 layout. The 2/3 cell contains 1 column with an easy slider within it. The 1/3 cell contains a 1 column with a text box and a button inside.

    This is the code I used:

    #top .flex_column_table {
    display: table;
    table-layout: fixed;
    width: 150%!important;
}

    I appreciate this is probably breaking Enfold, but it’s the only way I can think to achieve the look in the screen grab. Can you suggest a way of making it look like the screen grab? Is there a way to give the slider cell a class to make it do what I want?

    Sorry for the complex question, I hope you can help.

    Thanks.

    September 26, 2019 at 11:10 am #1142214
    Ismael

    Hey jonrouse,

    Thank you for the inquiry.

    I appreciate this is probably breaking Enfold, but it’s the only way I can think t

    You can actually add a unique class name to an element and apply a specific style to it. Have you tried that? You can enable the custom css class field in the Enfold > Layout Builder > Builder Options For Developers section. You can then add a unique class attribute to the cell or the grid row element, and adjust the css code above to target that specific element.

    // https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support

    Best regards,
    Ismael

    September 26, 2019 at 1:15 pm #1142253
    jonrouse

    Hi Ismael,

    Thanks for getting back to me (again!)

    So, could I just do this?

    .my-custom-tag {
    display: table;
    table-layout: fixed;
    width: 150%!important;
}

    Or would I need to add #top (or something else) before it? Sorry to ask. The only CSS I know are from the bits that I’ve learnt by customising Enfold! This person has their own hosting, and I don’t have access to the control panel, it seems like there must be something on it caching the site. When I looked at it today it seems like the page is displaying like the previewed version now, but I am keen to isolate this element so I keep control.

    September 27, 2019 at 9:56 am #1142632
    Ismael

    Hi,

    Thank you for the update.

    Yes, you can do that. If you want the selector to be more specific, add the “#top” id or even “.responsive #top” plus your custom class name. They’re all the same. Did you enable the Performance > File Compression settings? You should disable that for now.

    Best regards,
    Ismael

    September 27, 2019 at 11:03 am #1142675
    jonrouse

    Hi Ismael,

    Thanks for all of your help with this – how does the page look to you now?

    September 30, 2019 at 4:34 am #1143209
    Ismael

    Hi,

    You’re welcome. The site looks good even on mobile view. You didn’t overuse the “overlap” effect and it works pretty well.

    Best regards,
    Ismael

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