-
Posts
-
Hi guys,
First of all, I absolutely hate tables. But I have to use them to display this particular content.
When I place 2 tables in a 1/2 1/2 grid row, the tables overlap on mobile and you can’t scroll both tables anymore.
Do you know how to fix this?
Sincerely,
MortickaHi Morticka!
I tested the grid row test page on a nexus 4 and so far both tables are stacking properly and are completely scrollable.
What device are you experiencing the issue on? Also,may we have a screenshot from that device?
Cheers!
DakeHi Dake,
My apologies for the late response.
I’m experiencing the issue on iPad.
You can see the screenshot in the private content area.
Sincerely,
MortickaHey,
Please try the following CSS:
@media only screen and (max-width: 1100px) { .page-id-457 .flex_cell { display:block !important; } }You will have to change the page-id class to the page(s) you want the code to apply to.
Thanks,
RikardHi,
Could you please provide us with a temporary admin login so that we can take a closer look? You can post the details in the Private Content section of your reply.
Thanks,
RikardHi Rikard,
Ofcourse, included. I also have two other responsive issues with grid row on android and ipad. On android the pictures get smushed and on iPad the pictures are huge and the text gets smushed by the padding. It looks beautiful on desktop.
Do you have a fix for this too?
Links and screenshots included ofcourse :)
Sincerely,
MortickaHey!
Please edit the grid row with the table element. Add a value to the Section ID. Use “custom-grid” for example then add this in the Quick CSS field:
@media only screen and (max-width: 1200px) { #top #custom-grid .no_margin.av_one_half { width: 100%; display: block; }}You can do the same thing for the other issue.
Regards,
IsmaelHi Ismael,
Great, your table solution worked!!!! Thank you :D
I tried the same with the other grid row responsive issues, but this did not work. Images on ipad and android phone are still smushed and the text is smushed too.
Do you have a solution for that too?
Sincerely,
MortickaHey!
can you show us a link to the grid rows in question please? However, you can use Ismael’s code as an example and for the other grid rows you can use e.g.:
@media only screen and (max-width: 1200px) { #top #custom-grid2 .no_margin.av_one_half { width: 100%; display: block; }}Don’t forget to add custom-grid2 into “Section-ID” of the grid element in question.
Regards,
AndyHi Andy,
The links are in my previous post #499151 in the private data :) And I already tried Ismaels solution for the other grid row problems too and that did not work (see post #499763).
Do you have another solution?
Sincerely,
MortickaHey!
Are you referring to this page? [link in private content field]
It contains different columns that’s why the previous code is not working. Edit the grid row element, use another custom id in the Section ID field. Use “custom-grid-2” for example the include this inside the css media query located in Quick CSS field:
#top #custom-grid-2 .no_margin.av_one_third, #top #custom-grid-2 .no_margin.av_two_third { width: 100%; display: block; }Regards,
IsmaelHi Ismael,
Thx, but it does not work. It still looks bad on ipad.No wait, I forgot to put the second custom id in the CSS code!! It works, great Ismael, thx!! :D
I’ve copied the other link too in the private data. Do you have a solution for that one too?
Sincerely,
MortickaHi!
I checked your website and it does not look for me as in your screenshots, instead it looks good to me. Could you fix it?
Regards,
Andy
- You must be logged in to reply to this topic.