Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • August 30, 2021 at 8:06 am #1318922
    sitesme

    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

    August 31, 2021 at 3:38 pm #1319173
    Yigit

    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

    September 1, 2021 at 3:26 pm #1319369
    sitesme

    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.

    September 2, 2021 at 1:28 pm #1319508
    Yigit

    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

    September 2, 2021 at 3:07 pm #1319527
    Yigit

    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 years, 2 months ago by Yigit.
    September 2, 2021 at 4:21 pm #1319534
    sitesme

    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

    September 2, 2021 at 5:16 pm #1319539
    Yigit

    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

    September 3, 2021 at 8:22 am #1319610
    sitesme

    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

    September 7, 2021 at 11:34 am #1319955
    sitesme

    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

    September 9, 2021 at 5:12 pm #1320290
    Yigit

    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

    September 9, 2021 at 5:16 pm #1320292
    sitesme

    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

    September 13, 2021 at 7:21 am #1320636
    sitesme
    This reply has been marked as private.
    September 13, 2021 at 5:44 pm #1320778
    Yigit

    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

    September 13, 2021 at 7:11 pm #1320795
    sitesme

    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.

    September 14, 2021 at 2:52 pm #1320915
    Yigit

    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

    September 14, 2021 at 3:01 pm #1320919
    sitesme

    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.

    September 15, 2021 at 8:00 am #1320999
    sitesme

    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.

    September 19, 2021 at 1:42 pm #1321519
    Mike

    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

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