Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • February 25, 2021 at 10:19 am #1283614
    stigrs87

    Hi!

    Please take a look at this:
    https://www.hovewest.no/index.php/utleie/#tab-id-9

    It looks like it should on desktop but if you shrink it to mobile view, the last heading-row and the cells under are not sorting in to each heading.
    The heading also dont change as the ones at the top.
    Hope you understand my issue.

    • This topic was modified 3 years, 8 months ago by stigrs87.
    February 27, 2021 at 3:15 pm #1284121
    Victoria

    Hey stigrs87,

    Could you please attach some screenshots of the issue?

    Best regards,
    Victoria

    March 1, 2021 at 10:43 am #1284358
    stigrs87

    Working desktop version:
    https://www.dropbox.com/s/vvoyqx55736yrpy/Normal%20view.png?dl=1Working desktop version

    Mobile – First row as it should be viewed:
    First row working

    Mobile – Second row not working as it should – All headings in a row and the content uses the headings from the first row.
    Second row not working

    • This reply was modified 3 years, 8 months ago by stigrs87.
    March 1, 2021 at 2:56 pm #1284434
    Guenni007

    well the first thing they did not think of – is that there could be more heading rows than one!

    so this rule affects only the first heading-row:

    @media only screen and (max-width:767px) {
	.responsive .avia_responsive_table .avia-data-table tr:first-child th {
	  display:none
	}
}

    put in your quick css:

    @media only screen and (max-width:767px) {
	.responsive .avia_responsive_table .avia-data-table tr.avia-heading-row th {
	  display:none
	}
}

    the next thing is the wrong heading ( maybe one update will fix that – it will always take only the first heading-row )
    because heading in responsive case comes via pseudo container – we had now to find the rules for that …
    just looking to find a solution

    Edit: hm – guess there is no simple solution for tables with multiple heading-rows.
    Guess you had to setup two tables for that – one for wider screens and the other for your mobile version.
    There is an option on the alb element on Advanced – Element Visibility
    The first one got 3 columns and 2 heading rows –
    The mobile one got 6 columns and 1 heading row

    see here: https://webers-testseite.de/tables/

    March 1, 2021 at 3:52 pm #1284462
    stigrs87

    Thank you so much guenni,

    I`ll do that then :-)

    Regards

    Stig

    March 1, 2021 at 5:54 pm #1284526
    Jordan Shannon

    Hi,

    Did you need additional help with this topic or shall we close?

    Best regards,
    Jordan Shannon

    March 1, 2021 at 6:49 pm #1284553
    stigrs87

    If there is not a better solution to my problem you can close the thread. Did the worksround with two tables 👍🏻

    March 1, 2021 at 8:19 pm #1284563
    Guenni007

    hm – maybe:
    on my case of the example page i do this to quick css
    you go and count the tr where the new headings had to be inserted – and if you like to influence the first too:

    @media only screen and (max-width: 767px) {
	.responsive .avia_responsive_table .avia-data-table tr.avia-heading-row th {
		display:none
	}

	.avia-table-1 tr:nth-of-type(2) td:nth-of-type(1):before { content: 'a'; font-size: 14px; font-weight: 700; text-transform: capitalize; } 
	.avia-table-1 tr:nth-of-type(2) td:nth-of-type(2):before { content: 'b'; font-size: 14px; font-weight: 700; text-transform: capitalize; } 
	.avia-table-1 tr:nth-of-type(2) td:nth-of-type(3):before { content: 'c'; font-size: 14px; font-weight: 700; text-transform: capitalize; } 

	.avia-table-1 tr:nth-of-type(4) td:nth-of-type(1):before { content: 'd'; font-size: 14px; font-weight: 700; text-transform: capitalize; } 
	.avia-table-1 tr:nth-of-type(4) td:nth-of-type(2):before { content: 'e'; font-size: 14px; font-weight: 700; text-transform: capitalize; } 
	.avia-table-1 tr:nth-of-type(4) td:nth-of-type(3):before { content: 'f'; font-size: 14px; font-weight: 700; text-transform: capitalize; } 
}

    https://webers-testseite.de/tables/

    March 1, 2021 at 9:21 pm #1284573
    Guenni007

    in your case this would be:
    ( do not forget to change back the Element Visibility )

    @media only screen and (max-width: 767px) {
	.responsive .avia_responsive_table .avia-data-table tr.avia-heading-row th {
		display:none
	}

	.avia-table-6 tr:nth-of-type(2) td:nth-of-type(1):before { content: 'DI-bokser:'; font-size: 14px; font-weight: 700; text-transform: capitalize; } 
	.avia-table-6 tr:nth-of-type(2) td:nth-of-type(2):before { content: 'Shure:'; font-size: 14px; font-weight: 700; text-transform: capitalize; } 
	.avia-table-6 tr:nth-of-type(2) td:nth-of-type(3):before { content: 'DPA:'; font-size: 14px; font-weight: 700; text-transform: capitalize;} 
	.avia-table-6 tr:nth-of-type(2) td:nth-of-type(4):before { content: 'Sennheiser'; font-size: 14px; font-weight: 700; text-transform: capitalize;} 
	.avia-table-6 tr:nth-of-type(2) td:nth-of-type(5):before { content: 'AKG:'; font-size: 14px; font-weight: 700; text-transform: capitalize;} 

	.avia-table-6 tr:nth-of-type(4) td:nth-of-type(1):before { content: 'Audio Technica:'; font-size: 14px; font-weight: 700; text-transform: capitalize;} 
	.avia-table-6 tr:nth-of-type(4) td:nth-of-type(2):before { content: 'Neuman:'; font-size: 14px; font-weight: 700; text-transform: capitalize;} 
	.avia-table-6 tr:nth-of-type(4) td:nth-of-type(3):before { content: 'Beyer Dynamic:'; font-size: 14px; font-weight: 700; text-transform: capitalize;} 
	.avia-table-6 tr:nth-of-type(4) td:nth-of-type(4):before { content: 'Diverse'; font-size: 14px; font-weight: 700; text-transform: capitalize;} 
	.avia-table-6 tr:nth-of-type(4) td:nth-of-type(5):before { content: ''; font-size: 14px; font-weight: 700; text-transform: capitalize;} 
}
  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.