-
AuthorPosts
-
February 8, 2024 at 10:02 pm #1433740
Hi there,
Could somebody please send me code that works? I used to make my websites with the7 and every answer they sent was spot on. I am really amazed how much code you send that just doesn’t work. ?!? Sorry to be so blunt but I am now running out of time.Please help with the following problem:
Using the link below, please navigate to page “über mich”. At the bottom are 3 tables. In the desktop version they look ok now but in the mobile view they are messed up.Please send working code for the mobile version, so that:
1. the dates are not displayed double
2. no borders around all 3 tables, not just the top table
3. the years are not spread over 2 lines
4. the desktop version is unchanged by the new codeThanks
The code that you have sent so far, that I have used and that works ok in the desktop view is this:
#top .av-82qhko-49fd44439e70710ba9259a5b8656603c .avia-data-table {
border: 0;
padding: 10;
}div .avia-table {
background: transparent;}
#top.page-id-472 #main .main_color .avia-data-table * {
border: none;
background-color: #fff;
font-size: 18px;
text-align: left;
}#top.page-id-472 .main_color .avia-data-table.avia_pricing_minimal th {
color: #666666;
width: 15%;
}#top.page-id-472 .av-hriqo-df64f73a2229a5a484cc56fae9caca2e .avia-data-table td:before {
display: none;
}.av-hriqo-df64f73a2229a5a484cc56fae9caca2e table tr th {
width: 20%;
font-size: 20px;
font-weight: bold;
text-align: left;
background-color: #000000;
padding: 8px;
}- This topic was modified 10 months, 2 weeks ago by ausgesonnen.
February 9, 2024 at 5:56 pm #1433845Hey ausgesonnen,
Thank you for your patience, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:@media only screen and (max-width: 767px) { .responsive #top.page-id-472 .avia_responsive_table.avia-data-table-wrap .avia-data-table td:before { display: none; } .responsive #top.page-id-472 .main_color .avia_responsive_table.avia-data-table-wrap .avia-data-table.avia_pricing_minimal th { width: 48%; } .responsive #top.page-id-472 .avia_responsive_table .avia-data-table { border-style: none; } }
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.
Please see the screenshot in the Private Content area of the expected results.Best regards,
MikeFebruary 9, 2024 at 7:24 pm #1433860Ok great, much better. Thank you. And thanks for your speedy reply.
2 small problem remaining:
1. the first cell content with the years in each beginning of the 3 tables is not displayed. How can it be made to reappear?
2. It is not clear, which description the dates belong to because the distance between all cells is equal. How to decrease the distance between date and description only?Thanks
PeterFebruary 10, 2024 at 1:39 pm #1433905Hi,
The two question affect each other, so lets start with the second question.
Currently on mobile your table is like this:
To make it easier to read, how about this:
To achieve this try adding this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:@media only screen and (max-width: 767px) { .responsive #top.page-id-472 .avia_responsive_table .avia-data-table tr:first-child th { display: inline; } .responsive #top.page-id-472 div .avia_responsive_table .avia-data-table td, .responsive #top.page-id-472 div .avia_responsive_table .avia-data-table th { display: inline; } .responsive #top.page-id-472 .avia-data-table.avia_pricing_minimal tr { padding-bottom: 20px; } }
Ensure to keep the other css above. This also solves the first question.
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.Best regards,
MikeFebruary 10, 2024 at 4:14 pm #1433917Hm, Problems now:
1. in the first lines, the bottoms parts o letters are cut of, eg. the bottoms parts of g, p
2. there should be no indent for the dates.
3. best would be to have the description start on a new line. Is that possible?Best
PeterFebruary 10, 2024 at 5:08 pm #1433922Hi,
Ok, please remove the last snippet and try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field instead:@media only screen and (max-width: 767px) { .responsive #top.page-id-472 .avia_responsive_table .avia-data-table tr:first-child th { display: block; } .responsive #top.page-id-472 div .avia_responsive_table .avia-data-table td, .responsive #top.page-id-472 div .avia_responsive_table .avia-data-table th { padding: 0; } }
Best regards,
MikeFebruary 10, 2024 at 6:16 pm #1433926February 10, 2024 at 8:39 pm #1433944Hi,
Try also adding this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:@media only screen and (max-width: 767px) { .responsive #top.page-id-472 .avia-data-table.avia_pricing_minimal tr { padding-bottom: 20px; } }
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.Best regards,
MikeFebruary 26, 2024 at 11:40 am #1435419HI there,
after the tables initially performed well on Mobile and desktopview, they have now reverted back to the standard layout in desktop view. How could this happen? I have not touched the code for 2 weeks and have not looked at the page. Today suddenly the css for the Table view on desktop doesn’t take hold anymore. Is the handler not called this anymore? #top.page-id-472 .av-hriqo-df64f73a2229a5a484cc56fae9caca2e .avia-data-tableIt needs it be like this:
1. no borders
2. no grey background
3. font sizes bigger, both 16px
4. font in first column is blue
5. all fonts in cells align leftI suspect that the handler name somehow changed itself? can you please check? I would not like to go through adjusting the css again from scratch since it was so much hassle to get it right…
Bets, Peter
- This reply was modified 10 months ago by ausgesonnen.
February 28, 2024 at 7:10 pm #1435795Hi,
Thank you for your patience, I have looked at your table for mobile but is seems to match your above rules, please see the screenshot in the Private Content area of of what I see.
Nonetheless I might be able to offer an explanation, some classes are added to elements automatically and will change whenever the element or page is modified, these classes look like this: av-hriqo-df64f73a2229a5a484cc56fae9caca2e, so when I search your page for this class it is not found now so I assume that the page has been updated and that is why you saw the change. A possible solution could be to remove these from your css rules, if this doesn’t help the let us know.Best regards,
MikeFebruary 28, 2024 at 7:43 pm #1435805Hi Mike, thanks for looking into this. It has progressed since and gotten ever stranger. Will be in touch again. Not eben sure anymore how to phrase the question.
-
AuthorPosts
- The topic ‘Tables in mobile view don’t perform – (don’t give to Ismael)’ is closed to new replies.