Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • May 5, 2018 at 7:51 pm #952158
    Vrout

    Hi!

    I can’t find how to reduce space between columns (with ALB). I tried hard but I haven’t been able to target the right element with CSS…
    Please see link to the page + screenshot of what I’m trying to do.

    Also, I am using the “zoom on hover” effect on images, but since last update (4.3), the image is “cut” on the edges when zoomed.
    I have also tried various things, but I can’t seem to find the right element to target !
    Please see link + screenshot of the page too.

    Thanks a lot!

    May 6, 2018 at 4:29 am #952204
    Mike

    Hey Vrout,
    To reduce the space between columns on your page, Try this code in the General Styling > Quick CSS field:

    
#top.page-id-3719 .flex_column_table {
    width: 80%!important; 
    margin: auto!important; 
}

    Please see screenshot in Private Content area of expected results.

    Best regards,
    Mike

    May 7, 2018 at 5:44 pm #952782
    Vrout

    Hi Mike,

    Thank you for your help.

    Do you know how I could target a specific row ? I don’t want to apply this to the whole page.
    I added the same class to the blocks I want to move tighter, and I tried to target it like this : “#top.page-id-3719 .flex_column_table .myclass” but it didn’t work.

    And please it would be great if you could help me with my second issue (see my first post), don’t hesitate to tell me if I should open a new topic for it.

    Thank you!

    May 7, 2018 at 11:57 pm #952975
    Mike

    Hi,
    I looked at your page again, and I’m sure you only have one “flex_column_table” on the page, the “flex_column” below with the images are not affected.
    Please see screenshot in Private Content area.
    But if you only want to do one row within the flex_column_table, you will need to please give more info, preferably with a screenshot.
    We can work on the second issue within this thread, once the code fix for the first is in place.
    Thanks for your patience and understanding.

    Best regards,
    Mike

    May 8, 2018 at 1:01 am #952984
    Vrout

    Hi Mike,

    Thanks for your answer, unfortunately when I use the code you provided me, it also affects almost all elements that are above the part with the green little icons on the screenshot. But you are right that it does not affect what is below the icons part.

    To answer the second part of your message, it looks like I am therefore trying to target these 3 specific rows (the 3 rows with the green little icons). Do you think it is possible ?

    Thank you again,
    Have a nice day,

    May 8, 2018 at 2:58 am #953021
    Mike

    Hi,
    Sorry, I see now that I did miss that there is a flex_column_table above.
    Please try:

    #top.page-id-3719 .flex_column_table:nth-child(n+15) {
    width: 80%!important; 
    margin: auto!important; 
}

    Best regards,
    Mike

    May 10, 2018 at 12:52 pm #954516
    Vrout

    Hi Mike!

    Sorry for my late answer, I just tested it and it works great !
    Thank you for your help on this.

    May I ask you to help me on my second issue please?

    Thanks,
    Have a nice day

    May 11, 2018 at 6:12 am #955017
    Rikard

    Hi,

    Great, glad you got it working. What is your second issue?

    Best regards,
    Rikard

    May 14, 2018 at 1:08 pm #956421
    Vrout

    Hi Rikard,

    Thanks for you answer.

    My second issue is that I am using the “zoom on hover” effect on images, but since last update (4.3), the image is “cut” on the edges when zoomed.
    I have tried various things, but I can’t find the right element to target with CSS to arrange that.

    Please see link + screenshot in my first post of this topic.

    Thanks!

    May 16, 2018 at 8:21 am #957377
    Ismael

    Hi,

    Thank you for the info. This css code should fix the hover issue.

    .av-hover-grow {
    overflow: visible;
}

    Best regards,
    Ismael

    May 17, 2018 at 11:35 pm #958359
    Vrout

    Hi Ismael,

    Thank you for your help, but still no luck with this CSS fix :/

    Do you have an other suggestion maybe ?

    Thanks !

    May 21, 2018 at 11:30 am #959674
    Ismael

    Hi,

    The css code works on the browser inspector. Where did you add it? Please provide the login details in the private field.

    Best regards,
    Ismael

    May 30, 2018 at 5:59 pm #964428
    Vrout

    Hi,

    Sorry for my late answer.

    I added the fix to the quick CSS block in enfold options, I tried adding “!important;” but still didnt work.
    Updating Enfold didn’t help.

    Thank a lot

    May 31, 2018 at 7:24 am #964651
    Ismael

    Hi,

    Thanks for the update. The images that I checked are smaller than the others so I actually thought that the css modification worked. We adjusted the code a bit.

    .av-hover-grow, .av-hover-grow .avia-image-overlay-wrap a.avia_image {
    overflow: visible!important;
}

    Best regards,
    Ismael

    June 7, 2018 at 9:04 pm #969785
    Vrout

    Hi,
    Thanks a lot Ismael, it works perfectly !

    June 8, 2018 at 12:46 pm #970064
    Mike

    Hi,
    Glad Ismael was able to help, shall we will close this now?

    Best regards,
    Mike

    June 8, 2018 at 2:30 pm #970090
    Vrout

    Hi, Yes you can close now, it’s all solved! Thanks to the team

    June 9, 2018 at 2:45 am #970247
    Mike

    Hi,
    We will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    And if there are features that you wish Enfold had, you can request them and vote the requested ones here
    For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 18 posts - 1 through 18 (of 18 total)
  • The topic ‘Space between columns (ALB)’ is closed to new replies.