Tables in mobile view don't perform - (don't give to Ismael) - Support

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
February 8, 2024 at 10:02 pm #1433740
ausgesonnen
Participant
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 code

Thanks

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 9 months, 2 weeks ago by ausgesonnen.
February 9, 2024 at 5:56 pm #1433845
Mike
Moderator
Hey 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,
Mike
February 9, 2024 at 7:24 pm #1433860

ausgesonnen
Participant

Ok 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
Peter

February 10, 2024 at 1:39 pm #1433905
Mike
Moderator
Hi,
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,
Mike
February 10, 2024 at 4:14 pm #1433917

ausgesonnen
Participant

Hm, 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
Peter

February 10, 2024 at 5:08 pm #1433922
Mike
Moderator
Hi,
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;
}
}
```
This is the expected results:

Best regards,
Mike
February 10, 2024 at 6:16 pm #1433926

ausgesonnen
Participant

Ok I removed the last snippet and now this is what I got. Looks much better. It just needs more space between the entries. How to adjust that? Somehow it doesn’t look like in your expected result.

February 10, 2024 at 8:39 pm #1433944
Mike
Moderator
Hi,
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,
Mike
February 26, 2024 at 11:40 am #1435419
ausgesonnen
Participant
HI 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-table

It 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 left

I 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…

Über mich

Bets, Peter
- This reply was modified 9 months ago by ausgesonnen.
February 28, 2024 at 7:10 pm #1435795

Mike
Moderator

Hi,
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,
Mike

February 28, 2024 at 7:43 pm #1435805

ausgesonnen
Participant

Hi 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.
Author

Posts

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Tables in mobile view don’t perform – (don’t give to Ismael)’ is closed to new replies.