-
Posts
-
Hello,
If I open the page with masonry gallery in incognito mode, there is too big bottom margin below all elements. The masonry gallery has a standard large gap. If you reload the page, the margin becomes as it should be. Is it possible to have it correct from the first page load? Please see the private link.
Thank you,
MarinaHey Marina,
Thank you for the inquiry.
We can’t seem to reproduce the issue on our end (screenshot below). Would you mind providing a screenshot? You can use imgur, savvyify or dropbox for the screenshot.
// https://1drv.ms/u/s!AjjTfXSRbKTvz2nftePGu7uO7noG?e=sMLBWX
Best regards,
IsmaelHello,
Your screenshot does not include any bottom margin. Please see the link.
Best regards,
MarinaHi Marina,
I also tried to check your website on a desktop using the major browsers (Chrome, Firefox, Edge) and I don’t see any large gap on my end.
It’s only 15px bottom margin. Screenshot link in private content (using Chrome).Best regards,
NikkoHello Nikko,
Well, on your screenshot the bottom margin is on the contrary too small, if you compare it to the left, right and the very top margins. I presume, all the margins should be exactly 15px. Did you view the page in incognito mode? If you reload the page all the margins will become the same size.
Regards,
MarinaHi Marina,
I have checked it now in incognito mode and it shows as you have described which seems surprising since it produces different results though I’m not logged on both cases.
Can you setup a staging site for us? so we can check it further since I could not reproduce the same issue on my end.
Please provide temporary admin access for the staging site and post it in private content.Best regards,
NikkoHi Marina,
Thanks for providing us with admin credentials.
Switching it to the parent theme fixes the issue, so the issue is on the child theme.
I tried to locate the cause of the issue but I’m unable to find it, so the solution I was able to do on the staging site is to add this CSS code:#top .av-large-gap.av-flex-size .av-masonry-entry .av-inner-masonry { margin-bottom: 7px; }Please review the stage site.
Best regards,
NikkoHello Nikko,
This solution I tried myself, however, with it applied, after reloading the page the gap is too small. I would like it to have 15px in all the cases. What file in the parent theme is responsible for this?
Thanks,
MarinaHi,
Thanks for your patience, in my tests I disabled the above css and found that the extra space is not margin or padding:
it seems to be the position of the element below, for example on first page load in incognito mode you see the top: 745.766px;
but on reload it’s top: 738.5px;
I tried disabling all of your plugins and child theme, but the only thing that seems to change this is when I disabled your footer page and used the default footer.
I’m not sure why this would correct the issue but I ask that you also test this and see if you get the same result.
Thinking that this might be a new issue I tried to recreate this on my test site with a footer page vs a default footer but I was not able to.Best regards,
MikeHi Mike,
I tested: it seems that the margin is ok only when “Display footer widgets and socket” or “Display only the footer widgets (no socket)” is selected. I have a separate footer.php in the child theme folder, corrected according to the following ticket: https://kriesi.at/support/topic/custom-footer-is-not-always-displayed-on-the-search-results-page/. I tried to remove this file from the child theme folder, but it did not help with the issue. Maybe you can have a look.
Thank you,
MarinaHi,
Thanks for the feedback, it doesn’t seem that the customization is_search() || because the error also occurred with the parent theme active.
I see the height for the #footer-page is zero, but the contents of the #footer-page > #av_section_5 is 58px
I added this css to your WordPress ▸ Customize ▸ Additional CSS#footer-page { height:58px; }and it seems to have solved, please clear your browser cache and check.
Best regards,
MikeHi,
The solution does not work on production site, since there is no message from WPML at the very bottom that this is the development site. After I removed this message on the site you are working with (I registered the testing environment as a production site), the solution stopped working there too. Please have a look.
Thank you,
MarinaHi,
Strange, that the WPML message bar would have an effect on the height of the masonry gallery items and that setting the height of the footer-page did seem to help while the WPML message bar was there. This leads me to think that there is a height issue somewhere but I don’t know where.
I asked the rest of the team for ideas, and will reply when I hear back. Thank you for your patience and for using Enfold.Best regards,
MikeHi,
A member of the team suggests that it may be related to something about your footer page, I see that it contains three color sections for three different device size layouts, please try a new footer page with one layout for all devices and see if this helps.Best regards,
MikeHi Mike,
I tried with a very simple footer page, but it did not help. I have made some tests: the issue disappears if the left sidebar, containing the main menu, does not fit by height on the screen and, hence, stops to be sticky. I added duplicated menu items to demonstrate this, please have a look. Maybe this can help.
Thank you,
MarinaHi,
Thanks for the feedback, I removed the extra menu items and did some testing and found that the custom sidebar widget area with your search widget in the sidebar header had a weird height, instead of the expected 120px that you see for the element it was over 500px behind the menu items set by a percentage value.
I tested with height:90vh; and this seemed to correct the height of the masonry gallery gap, then I tested the value down to the lowest working setting of 70vh which is in the WordPress ▸ Customize ▸ Additional CSS now, please clear your browser cache and check.
If this doesn’t work try 80vh & 90vh.html_header_sidebar #top #header_main .avia-custom-sidebar-widget-area { height:70vh; } .html_header_sidebar #top #header_main { border-bottom-style: none; }Best regards,
MikeHi Mike,
This solution makes the left sidebar not sticky, and I would like to keep it sticky. If I use 50vh, so that the sidebar fits on screen and is not scrolled, then, the issue reappears.
Best regards,
MarinaHi Mike,
I have one more request, if I might ask :). It is about the border on the left of the footer always, and of the content area when the left sidebar is not sticky. You helped me to add the border for the sidebar part (please see the code below). Is it possible to prolong it for the footer, and when the sidebar is not sticky? Please see the screenshots.
/* Border on the right of the Logo and Main Menu sidebar */ .html_header_sidebar #top #header { border-right: 1px #e0e0e0 solid; } .html_header_left #wrap_all #main { border-left-style: none; border-left-width: 0; }Thank you very much,
MarinaHi,
Thanks for the screenshots, but I’m not sure about your request, please explain further.
Also, I thought you wanted the sidebar header fixed and that is why the last solution is not acceptable.Best regards,
MikeHi Mike,
The sidebar header is fixed only when it fits within the screen height. On small screens it becomes scrollable since otherwise the search widget will be inaccessible. In the latter case, you can see that there is no border on the left of the main content area, and the design looks a bit unfinished.
Regarding the footer, there is no border on the left of it always. Of course it is just one pixel and the footer is not high, but it would be nice to have the border there :).
Thank you,
MarinaHi,
Thanks for the feedback, when I check the page in your screenshot /test/portfolio/ it does have a 1px right border that the entire sidebar header has even into the footer:
Perhaps you don’t see it well since it is a light color and 1px, here I make it 10px so you can see it better:
The same is true on your other page, this is the css if you want to adjust it:.html_header_sidebar #top #header { border-right: 10px #e0e0e0 solid; }After applying the css, please clear your browser cache and check.
Best regards,
MikeHi Mike,
You are absolutely right about the footer, sorry for this. But if you make you browser window size smaller so that the header sidebar becomes scrollable, you will see that there is no border on the left of the content which is lower than the end of the sidebar. Please see the screenshot with 10px border. Is it possible to prolong the border to the full length of the content in such cases? Would look better on small laptops I think.
Thank you,
MarinaAnd, I just noticed, it appears a 2px border for some part on the right of the content, separating the left sidebar, it is a bit strange effect.
Hi,
For single posts in that situation you could use this css adding the border to the left of the content:#top.single-post .av_default_container_wrap.container_wrap.sidebar_right, #top.single-post #footer-page .container, #top.single-post #wrap_all #main #section-post-title.avia-no-border-styling { border-left: 10px #e0e0e0 solid; }And disable your header border for these situations, but this won’t work on all of your pages so you may need to adjust this differently for those.
Best regards,
Mike
- You must be logged in to reply to this topic.