-
Posts
-
Hello,
I am unable to get the grid-row element to work correctly in a mobile/responsive setup.
I left each row’s setting as default, but when I narrow the view or view on a mobile device, the grid-rows will not shift as expected (they stay side by side).
I’m also having this problem with the elements on the bottom of the page (1/4 width blocks that won’t stack up in mobile views)
Do you have any thoughts or guidance?
Thank you!
Hi kientran!
There is a setting for this when editing the grid row element called “Mobile Behaviour”. You can set it so the cells span to full width or continue in a row.
Best regards,
ElliottHello Elliott,
I understand but the problem is that setting has no effect on my page. Either in cell span or side by side, the cells always stay side by side.
Hi!
The section is outside the wrap all container that’s why it’s not working. I noticed that you use html codes inside the text elements. Please check if all tags are closed properly. Save the page layout as template then create a test page. On the test page, place all content (1/1 column for example), inside a color section even if you’re not planning to add any background to it. Maybe, that will fix the issue.
Regards,
IsmaelSpending a bunch of time moving and removing and checking elements. I had no tags in any text box that was not part of the avia framework editor.
It seems that something is creating a random extra /div close at the end of the section, but it’s not apparent yet to me what or where it’s coming from. Doing a trace of the divs, there’s always some extra /div at the end of some section that gets matched up to the main wrap, causing every section below to have issues. Still trying to track down what causes it specifically.
I removed all external short-codes and the problem still occurs. I’ll have to attempt to recreate the page from scratch on section at a time as I’m not sure if there is some random div saved as part of the page itself that keeps getting propagated though until deleting enough sections causes it to correct itself. I noticed at the end there are always 4-5 extra divs at the end of the page, including one commented as end of the main wrap.
Hey!
Hmm, I would try completely deleting Enfold from your WordPress theme directory before downloading + uploading a fresh copy from themeforest.
If you can reproduce the problem on a new page after doing that then send us a link to the new page and we’ll check your elements to see if there is a typo in your tags somewhere.
Also be sure to deactivate all plugins while testing to make sure plugins are not causing any weird behaviours (which happens a lot).
Best regards,
ElliottUPDATE:
I had a special heading in between each grid-row, so I moved them into a grid-row cell rather than placing above the grid-row, and this fixed the responsive issue.
However, now I am seeing problems with the way the images are being displayed. I’ll keep trying to debug.
Thanks!
- The topic ‘Grid-Row Mobile responsive not working’ is closed to new replies.