-
Posts
-
Hello,
I can’t get the grid row at the bottom of the home page to be displayed correctly (stacked) on mobile/tablet when all the options are (seemingly) properly configured.
Mobile behaviour: Each cell is displayed on its own.
The background image and the text stay side by side instead of switching to full-width and being displayed vertically (image on top of the text, or the other way round, doesn’t matter.
What’s more, switching off the element visibility for small screens also doesn’t work, the grid row is still displayed, still side by side and also when changing window size at one point the grid row stops being full screen and there is white strip visible at a certain resolution.
It looks like I have this problem only on my home page, grid rows on other pages work as expected (change from side by side to vertical stack on mobile/tablet).
I’ve read some very old topic and the solution was to put grid row into the color section to make it responsive, but I can’t do this now.
Also, the footer is displayed differently on the home page, compared to other pages (no white top and bottom borders for headings on column widgets).
Any ideas how to fix it?
Thanks,
Tom
Hey Tom,
Please send us a temporary WordPress admin login and login URL so that we can have a closer look. You can post the details in the Private Content section of your reply.
Best regards,
RikardHi,
Thanks for that. First off, could you try updating the theme to the latest version (5.6.9) to see if that helps please? https://kriesi.at/documentation/enfold/how-to-install-enfold-theme/#theme-update. If you haven’t registered your theme license, then please follow this: https://kriesi.at/documentation/enfold/theme-registration/
Best regards,
RikardHi again, I’ve updated to the latest version and unfortunately no change, the problem is still there.
Interestingly, I’ve removed quick CSS code from General Styling section (which was there to make the footer widgets responsive and stacked in tablet/mobile view) and it looks like the footer widgets are responsive on all pages except the home page, where they are still side by side, so it suggests that responsiveness and stacking is for some reason not working on the home page only, but why is that? (I’ve put this quick CSS in the private section if you want to add it back to General Styling to check, it’s actually a code from this forum).
I’ve also noticed that the home page is marked as ‘Inactive Custom Footer Page’ and I can’t see the option to change this, I’m not sure what it means but maybe that causes the issue, but that’s just a wild guess I really don’t know why the home page seems to be following different rules for that grid row and footer widgets than other pages.
Thanks,
Tom
Hi,
Thanks for the update. Something in the content on the front page seems to be breaking the layout for some reason. I created a test page, please see private. When I remove the slider on the top, the responsivness starts working again. Could you try to recreate the slider on the test page, to see what happens then?
Best regards,
RikardHi, thanks. I’ve added an empty Fullwidth Easy Slider to the page (at the top) and it broke the layout (including the bottom grid row and the footer widgets display) even without any content in it. Repeated that a few times – I left that empty slider on the test page now for you to double check.
Of course, a temporary solution would be not to use that slider and use some other slider instead, but is there any fix to the Fullwidth Easy Slider you could apply to avoid that? If, of course, it is this element that is causing the issue, maybe it’s a combination of several factors.
Thanks,
Tom
Hi,
Thank you for your patience, I have examined the test page on your site removing & adding the slider and then checked the page shortcode carefully with the Avia Layout Builder Debugger and at one point I thought this might be related to the wp:paragraph tags that I found in some text elements:
but removing them didn’t help, so I copied the page to my test site to see the error would follow but it didn’t, I linked to the test page in the Private Content area so you could also check. This make me think that it was related to your footer widgets somehow, so I copied your to my site and I still couldn’t reproduce the error.
I then disabled the header on your test page and reuploaded the theme and disabled your plugins, but this didn’t help.
I also disabled your File Compression and cleared your Old CSS And JS Files.
So I’m not sure what the issue is from, but it doesn’t seem to be a error in the theme, since I can’t reproduce the error.
Your Site Health report says that your PHP module, imagick, is not installed, I don’t see how that could cause an error like this but it may be worth tring.
You could also try a different PHP version, I’m using v8.0.30, and you are using v8.1.26, perhaps try v8.2 or v7.4Best regards,
MikeHi Mike, thanks for your time. I’ve changed PHP versions to 8.0, 8.2 and 8.3 (can’t go back to 7.4 now) and it didn’t help. It’s 8.2 now (as recommended).
However, I decided to rebuild the home page from the scratch and created the New Home Page. I was adding elements starting from the Fullwidth Easy slider and everything was working perfectly until the last grid row at the bottom of the page, which broke the layout and responsiveness of the footer. It happens even when adding a new empty grid row from layout elements menu of Avia builder. So I thought it must be the grid row element that is responsible for that.
HOWEVER, when I remove the Fullwidth Easy Slider from the top of the page, then the grid row at the bottom does not break the layout or responsiveness! BUT it makes the grid row directly above it not going full width when changing to tablet/mobile resolution! That leaves me completely puzzled – it looks like some of those elements TOGETHER cannot work correctly.You can try this on ‘Kriesi test page’ or ‘New Home Page’ – I’ve saved the top slider as ‘001 Old slider’ and bottom grid row is ‘006 grid row’ in Templates, so you can just remove and add them easily to see how they break the layout and responsiveness together, but when one is deleted everything goes back to normal.
And what is even more puzzling, when I add the same Fullwidth Easy Slider from the template at the bottom of the page (see New Home Page) it displays differently than at the top, when it’s preceded by that grid row, (colours and font sizes are all wrong, despite the same settings in the slider options). BUT when I delete that 006 grid row which is preceding it, then the slider at the bottom displays correctly, and so does the footer and it’s responsive as it should be. So really that grid row looks to be a problem, but I’ve got no idea why! (check the New Home Page first and then remove the grid row above the bottom slider, you will see the difference).
I haven’t tried deleting other layout elements, it’s actually enough of the mystery to me :) But it happened all the same on a newly created page (‘New Home Page’) with empty grid row added from the menu, so it looks to me like there must be some issue with the theme elements working together in the layout builder, but again it’s just my gut feeling. I haven’t installed imagick, I also don’t think this would cause the problem. However, if you’ve got no other suggestions, I may try this but I wouldn’t like to add unnecessary things on the server side if possible. I also haven’t yet install caching plugin on that site, but again how would this be the issue here?
Thanks for your time, let me know if you find the cause and/or solution for all this, but for now I will just rebuild the home page using some configuration and elements that will work correctly together.
Tom
UPDATE: I have now changed Fullwidth Easy Slider to Fullscreen Slider on the Home Page, and again adding the grid row at the bottom causes the problem to reappear.
Hi,
Thank you for the update.
We saved the content of the home page as a template and applied it to another page, but we are unable to reproduce the issue you described. Please check the link in the private field.
Would you mind providing a screenshot of the issue? You can use platforms like Savvyify, Imgur or Dropbox to upload and share the screenshot. Here are the steps to follow:
1.) Visit the website of your chosen platform, such as Savvyify, Imgur or Dropbox.
2.) Locate the option to upload a file or an image.
3.) Select the screenshot file from your computer or device and upload it to the platform.
4.) After the upload is complete, you will be provided with a shareable link or an embed code.
5.) Copy the link or code and include it in your message or response to provide us with the screenshot.Thank you for taking the time to share the screenshot. It will help us better understand the issue you’re facing and provide appropriate assistance.
Best regards,
IsmaelHi, thanks, I’ve changed the home page so that it does not include the grid row which was breaking the layout now, but I can see you’ve created a ‘Test Home’ page, on which I have recreated the problem. Simply add the empty grid row at the bottom there, and it will break the footer display and responsiveness, or add ‘006 grid row’ saved in Templates with content, and the grid row is not responsive (and breaks the footer as well). I attached the link to Dropbox in private section, here is the list of screenshots:
001 – correct layout desktop
002 – correct layout mobile
003 – added empty grid row at the bottom
004 – footer display changed in desktop view (no white borders)
005 – footer not responsive in mobile view
006 – added grid row with content (named 006 grid row in templates) – incorrect footer display in desktop view
007 – added grid row with content (named 006 grid row in templates) – incorrect footer display in tablet view and grid row layout broken – not full width and not stacked
008 – added grid row with content (named 006 grid row in templates) – incorrect footer display in mobile view and grid row layout broken – not full width and not stacked
009 – added grid row with content (named 006 grid row in templates) – incorrect footer display in the narrowest mobile view and grid row layout broken – full width but not stackedNow, I’m also pretty sure if you now removed the top slider and left this ‘006 grid row’ which breaks the layout and responsiveness, the layout and responsiveness would be correct again… no idea why and how those elements are related (and perhaps this would also happen if you removed other layout elements, but I wasn’t checking that).
Just for the record, it was built on a clean WordPress install, then clean Enfold, followed by clean Enfold Child, and then one of your Demos loaded, so you can follow the same route if necessary. As you can also see not many plugins installed yet, and the ones that are there are rather standard.
Thanks,
Tom
Hi,
Thank you for the screenshots.
We added an empty grid row at the very bottom of the page and managed to reproduce the issue. The problem occurs because the other grid row and the footer are rendered outside the main wrapper. Unfortunately, we are not yet sure what is causing it. What are you planning to add in the Grid Row container?
Best regards,
IsmaelHi, thanks and sorry about the delay, it’s Xmas rush time :) I planned to put some nice photos there on one side (possibly as a background) accompanied with some text on the other side, 2 columns like the one saved as ‘006 grid row’ in Templates and also like you can see on the Juniors page, which is nice and responsive, no problem there… I’m not sure what’s going on either, but if there is no quick fix to that I’ll just find some workaround (feel free to suggest sth if you’ve got any ideas), cheers!
Tom
Hi,
Sorry we were not more help, I do not know what could be causing this. Are you using a object-oriented cache such as Memcached, Redis, Varnish, Litespeed, etc?
If so try disabling this and check again.
Unfortunately we were not able to reproduce this on our test site, and you site still does this with all of your plugins disable and no custom code in your child theme functions.php
So it is very strange. We will keep this thread open should we or you having any ideas.Best regards,
MikeHi, yeah it’s very strange. If you say that you can’t reproduce the issue on another site, then I’m also thinking about exporting site data (creating a backup copy) using one of the export plugins, then deleting everything, installing new WP on the server, then new Enfold and new Child, and then importing site data again, but firstly it will take some time so I’m not too keen on doing that, and secondly, not sure if the issue would be exported in the backup copy as well? Because if so then no point doing that, obviously, because it will come back with the imported backup copy file :|
Or could it be related to the fact that I imported your demo after installing Enfold Child, which (maybe) includes some old code that causes that? I’ve done it mainly for that demo’s theme colours which I liked, so I may try next time without loading that demo, again – if it’s something that could cause that issue, which seems unlikely but just trying to exclude every possibility before building everything again from the scratch (if I find time to do so, for now I’ll just leave it as it is and will work around it).
Merry Christmas and Happy New Year! :)
Hi,
Would you be doing this on the same server or a different server? As you recall I copied you page using the Avia Layout Builder Debugger so the page shortcode for the single page could be copied.
You could easily test using this method, try creating a new WordPress install on a test subdomain, install Enfold and then copy the one page by Enabling the Avia Layout Builder Debugger and check if the error occurs, if it does and it’s the same server, try the same steps on a different server and check again.
I restored my precious test page of your page if you want to review again.Best regards,
Mike
- You must be logged in to reply to this topic.