-
AuthorPosts
-
August 30, 2021 at 8:06 am #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
August 31, 2021 at 3:38 pm #1319173Hey,
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,
YigitSeptember 1, 2021 at 3:26 pm #1319369Hi @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 #1319508Hi,
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,
YigitSeptember 2, 2021 at 3:07 pm #1319527Hi,
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, 3 months ago by Yigit.
September 2, 2021 at 4:21 pm #1319534Hi @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 #1319539Hi,
Yes, please update the file and then save theme options and clear cache so we can make sure update file is used :)
Best regards,
YigitSeptember 3, 2021 at 8:22 am #1319610Hi @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 #1319955Hello @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 #1320290Hi,
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,
YigitSeptember 9, 2021 at 5:16 pm #1320292Hi @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 #1320636This reply has been marked as private.September 13, 2021 at 5:44 pm #1320778Hi,
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,
YigitSeptember 13, 2021 at 7:11 pm #1320795Hi @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 #1320915Hi,
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,
YigitSeptember 14, 2021 at 3:01 pm #1320919Hi @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 #1320999Hi @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 #1321519Hi,
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 -
AuthorPosts
- You must be logged in to reply to this topic.