-
Posts
-
Hello,
I have put in a tab section some masonry short code and it works but the problem is that i have to scroll in order to layout my pictures, Before the scroll, the distance between my images is very large and after scrolling the distance is as I would like it to be from the start..On this page, when i open it everything is fine:
When you click on “Meubles” there is a big gap betwen pictures, i have to go at the top of the page on go down to have the space i would like to have betwenn pictures..
How can i solve it?
Thanks!!
Hey pierremartin311,
Thanks for the link to your page, it looks like you have some custom css to change the width of the images and this is causing the issue. Using css to change the size of the element before it is loaded can cause issues, try removing this custom css.
Another option would be to reload the page when the tabs are clicked, try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:function custom_script() { ?> <script> (function($){ $(".tab").click(function(){ location.reload(true); }); })(jQuery); </script> <?php } add_action( 'wp_footer', 'custom_script', 99 );Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
Best regards,
MikeHello,
the only css i have concerning Masonry are :` .main_color .container .av-inner-masonry-content,
#top .main_color .container .av-masonry-load-more,
#top .main_color .container .av-masonry-sort,
.main_color .container .av-masonry-entry .avia-arrow {
background-color: rgba(248, 248, 248, 0.6);
}
.av-fixed-size .av-masonry-entry .av-inner-masonry-content,
.av-caption-on-hover .av-masonry-item-with-image.av-masonry-entry .av-inner-masonry-content {
text-align:center;
padding: 0 10px 0 10px;
font-size: 16px;
font-weight:700;}
.av-inner-masonry {
box-shadow:10px 10px 5px 1px rgba(0,0,0,0.3);
}`I removed it and it changed nothing..
Concerning the script, it doesn’t change anything too.
Hi,
When I test the script it seems to work, perhaps you made an error when you added it to your functions.php file, often the the symbols are converted, try again and if you have further trouble include a admin login in the Private Content area so we can examine.Best regards,
MikeHi,
Thanks, when I check your page now the “Meubles” is the default to load and the error doesn’t occur.
I notice that you also have a javascript error for “cf7a_download_button”, have you tested this with the plugins disabled?Best regards,
MikeHello,
Nothing is working… when i arrive to the page, on “Meubles” there is a little space between the pictures.. it’s OK. then i click on “portes” and there is a big gap between pictures.. i have to scroll at the top of the page to reduce this gap and to have the same layyout that i have on “meubles” at the begining…Hi,
When you land on the page the small space that you see is normal and set by the Tab Section ▸ Content Padding
I disabled your Classic Editor which is not needed because this is a built-in theme setting, and I don’t see the issue of a “large gap” now please clear your browser cache and check.Best regards,
MikeHello,
I didn’t know that i could disable classic editor…
Excuse me but it still the same..i clear all the cache, the browser and the litespeed cache. I even try it on Edge that i never use.
1- I open “https://vernissageduvar.com/nos-realisations/” the gap between the pictures is small and it’s what I want!2- i click on “portes” and there is a big gap between the 2 rows.. i have to scroll at the top of the page to see the same i can see on “meubles” when i open the page!
If i stay on “portes” and i refeesh the page, the gap between the picture is small ang i have a big gap if i go on “meubles”..
i don’t understand!And i delete the script in functiuns.php because with it, i was unable to navigate between tabs with mobiles….
Hi,
Thank you for the update.
We temporarily disabled the cache plugin, then modified the script in the functions.php file to make sure that the position of the masonry items adjusts correctly when the tabs are clicked. Please make sure to hard refresh the page before checking.
This is the updated code:
function ava_custom_script() { ?> <script> (function ($) { $(document).ready(function () { $('.tab').on('click', function (event) { event.stopImmediatePropagation(); setTimeout(function () { console.log('resize'); $('.av-masonry').avia_masonry('applyMasonry'); $(window).trigger("debouncedresize"); }, 500); }); }); })(jQuery); </script> <?php } add_action('wp_footer', 'ava_custom_script', 9999);Best regards,
IsmaelHello,
Thanks a lot! it works now!
I have one question about the script: I dont have child theme and i use to keep modifications that i made in functiiuns.php in order to put it again when the file is updated.
I saw that you did’nt put the script at the end of the file, is there a reason for that?
Everytime i put modifications of functiuns.php at the end so it’s easyier for me to update it when it’s necesary.
As you see, I don’t understand so much about all of this…Thanks for your answer!
And tanks again for your help!oh, i forget to ask you something concerning the classic editor:
It seems that i can uninstall it now but why? because without this plugin it didn’t work like i wanted before..Did you do something to integrate it to Enfold?Hi,
The Classic Editor function is in the theme at Enfold Theme Options ▸ Select Your Editor ▸ Use WP Classic Editor I disabled it to ensure there was not a conflict. If you want to use the plugin feel free to enable it again.Best regards,
MikeOk, so i can disable the plugin? And concerning the script? I saw that you did’nt put the script at the end of the file, is there a reason for that?
Hi,
Ismael made the last change, so he must have felt this was a better location.
I notice that you are not using a Child Theme, I recommend using one and add all of your customizations to it, otherwise you will lose them the next time that you update the theme.
If you do not want to use a child theme you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:
and ensure that it is activated, then add your customizations.Best regards,
MikeHello,
i don’t need plugin, i just copy at the end of functiuns.php the modifications i made when there is an update of the theme. That’s why i want to now if it’s possible to put this scipt at the end of my functiuns.php.. i tried but it dosn’t work and i don’t know php …Hi,
Ok, then just copy the functions.php file and update it after you update the theme each time, in some cases the order of the scripts can make a difference, so perhaps this is why Ismael moved it.
To me it seems like extra work to copy the file each time you update, if you used the WP Code plugin you would not need to do this, perhaps you will give this a try. If not then just copy the functions.php file and update it after you update the theme each time.Best regards,
Mike
- The topic ‘Masonry layout’ is closed to new replies.