Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #1318922

    Hello,

    After a recent update of Enfold, the contents are not 100% centered, but slightly deviated to the right (left side has a larger gap).
    This is more obvious with a masonry element, not sure if also happens with other elements, and it is more obvious on mobile (portrait mode).

    Below is the screenshot and live URL in private. Can you please help to fix this?

    Thank you

    #1319173

    Hey,

    Thanks for contacting us!

    Please add following code to Quick CSS field in Enfold theme options > General Styling tab

    #top .container .av-masonry.av-large-gap {
        padding-left: 0px;
    }

    I see that this was added in the latest version. I will check with our devs :)

    Best regards,
    Yigit

    #1319369

    Hi @yigit, thank you once again for your great help (as always).

    This fixed the problem on that page but I also noticed the same in other pages that didn’t fix.
    Please check the URL in private below.

    #1319508

    Hi,

    Could you please replace the code with following instead?

    #top .container .av-masonry.av-large-gap {
        width: 100%;
    }

    We have an open issue about this and will provide a permanent fix for upcoming version :)

    Best regards,
    Yigit

    #1319527

    Hi,

    I just heard back from our devs. Could you please replace enfold/config-templatebuilder/avia-shortcodes/masonry_entries/masonry_entries.css file with – https://pastebin.com/g64nnUgK in Appearance > Editor and check if that fixes both elements?

    If you would like us to update the file for you, please create temporary admin logins and post them here privately so we can update it :)

    Best regards,
    Yigit

    • This reply was modified 3 weeks, 1 day ago by  Yigit.
    #1319534

    Hi @yigit,

    Ok, first it wasn’t working because I removed the latest CSS code you sent me and updated the file.

    But if I change the code on whole masonry_entries.css file and add your CSS code, everything seems to be working fine, but let me make sure by checking more pages.

    Is it how it is supposed to be? Update file + Update CSS?

    Thank you

    #1319539

    Hi,

    Yes, please update the file and then save theme options and clear cache so we can make sure update file is used :)

    Best regards,
    Yigit

    #1319610

    Hi @yigit,

    Unfortunately, something went wrong on the homepage (first problem that you helped fixed).

    So, I applied the first code, then replaced it by the second code and finally replaced the page masonry_entries.css

    The side gaps are still not even on mobile.

    Thank you

    #1319955

    Hello @yigit

    I guess I temporarily fix the problem with the following code:

    #top .container .av-masonry.av-large-gap {
        width: 100%;
        padding-left: 10px;
    }

    Is this method recommended for all masonry options?

    Also, is there a way to have the all masonry galleries in full width for mobiles? i.e. no gaps or padding on the sides?

    Thank you

    #1320290

    Hi,

    Sorry for my late reply!

    1- It seems like you have figured it out by using following code

    
    
    #top .container .av-masonry.av-large-gap {
        width: 100%;
        padding-left: 10px;
    }

    2- You can refer to this post – https://kriesi.at/documentation/enfold/color-section/#color-section-with-100-content-width and place your Masonry element inside your custom Color Section element and use CSS code as following

    
    /* Color section container width on mobile */
    @media only screen and (max-width: 480px) { 
    #section-container-width .container {
      width: 100% !important;
      min-width: 100%;
      padding: 0;
      margin: 0;
    }}

    Best regards,
    Yigit

    #1320292

    Hi @yigit

    I believe I didn’t fully fix the problem. It is still not centred.

    The homepage is better than other pages. The code is working better for the homepage basically but not for the “projects” pages which are all masonry.

    Please check the page below in PVT

    #1320636
    This reply has been marked as private.
    #1320778

    Hi,

    Could you please remove “padding-left: 5px;” from your code and add following code as well?

    .av-large-gap.av-fixed-size .av-masonry-entry .av-inner-masonry { 
         right: 0; 
    }

    Best regards,
    Yigit

    #1320795

    Hi @yigit

    That code worked perfectly for mobile, but it “damaged” the whole website on desktops.
    Basically, it removed all the gaps in all galleries.

    My limited CSS knowledge allowed me to replace your code by the following:

    @media only screen and (max-width: 767px) {
    .av-large-gap.av-fixed-size .av-masonry-entry .av-inner-masonry { 
         right: 0; 
    }
    }

    This seems to have fixed 99% of the problem now. The only problem is that the gaps are gone on mobiles where they existed before. Any idea how could I fix this?

    I am also very, very concerned that these particular changes might get overwritten or prioritised by a future update of Enfold. Is there a way to add all these alignments to the core enfold CSS? These are centered misalignments, not exactly custom adjustments.

    Many thanks for all.

    #1320915

    Hi,

    After updating the file on my local installation I can no longer reproduce the issue. Could you create temporary admin logins and share them here privately so we can look further into the issue?

    Changing your code to following

    @media only screen and (max-width: 480px) {
    .av-large-gap.av-fixed-size .av-masonry-entry .av-inner-masonry { 
         right: 0; 
    }
    }

    fixes the issue on desktop however right/left spacing is not correct then.

    Best regards,
    Yigit

    #1320919

    Hi @yigit,

    Surprisingly, the code I mentioned solves 99% of the problems. The left/right spacing is nearly perfect everywhere. However, it still collapses in some devices (tablets and mobiles for example).

    Please find the temporary login in private.

    Please make a note of all changes that you make because there are many customised CSS sections. We don’t want to have one fix that might damage others.

    Many thanks.

    #1320999

    Hi @yigit,

    Just a quick update that I have removed all the code from the custom CSS box (commented out at the end) since the “damage” as it is is very minor. The code provided caused much more problems.

    Please add the new code whenever you have the opportunity at the end of the CSS box so I can confirm if the problem is fixed on all devices.

    Thank you.

    #1321519

    Hi,
    Sorry for the very late reply and thank you for your patience, I read through this thread and believe that now you are using v4.8.6.2 and have removed your custom css, I checked your homepage masonry at mobile & tablet, screenshots below, and the gaps and spacing seems correct. I also checked your /projects/ page and it seems that this issue is resolved, please check and let us know if we should close this thread.

    Best regards,
    Mike

Viewing 18 posts - 1 through 18 (of 18 total)

You must be logged in to reply to this topic.