Tagged: grid row mobile stacking
I have been using enfold for quite some time. recently I started building a new site with it for work. I am using a grid row but it will not stack properly on mobile. I have set Column Behaviour When Fullwidth to “individually select position for each column” and then have gone and numbered each column accordingly.
In this example the image is set to 2 and the text box with button is set to 1 because I want the image to stack below the text box on mobile but instead the image is showing up on top.
Hey dpcram,
These settings are working on my demo site, please include an admin login in the Private Content area so we can examine your page.
Best regards,
Mike
Absolutely, thanks Mike any help would be amazing.
Hi,
I made a copy of your page and removed your script from the bottom of the page and the stacking order for the first “Equipment Rentals” works correctly now.
I don’t know why the script is causing this, but I do note that you have two sections for each ID:
#rentals-tab, #season-lease-tab, #tuning-tab
one a grid row and the second a color section, typically this will cause issues with linking to sections with an ID like you are in your custom submenu, as basic HTML rules state that on each page all IDs must be unique.
Since your script is looking for your IDs: const sections = document.querySelectorAll('#rentals-tab, #season-lease-tab, #tuning-tab');
I’m not sure what conflict is occurring with the second IDs.
nonetheless, review the copy page without the script and perhaps you can debug your script.
Best regards,
Mike