Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • October 14, 2019 at 2:06 pm #1147848
    evilmc

    Hello,

    I want to change columns size: 1 column: width 15%, 2 column: width 70%, 3 column: width 15%

    Thank you!

    October 15, 2019 at 1:01 pm #1148054
    Rikard

    Hey evilmc,

    I’m not sure I understand your intentions, could you post a screenshot highlighting what you are trying to achieve please?

    Best regards,
    Rikard

    October 16, 2019 at 11:19 am #1148405
    evilmc

    I want to change column size for my table:

    https://prnt.sc/pjz2tg

    • This reply was modified 5 years, 1 month ago by evilmc.
    October 18, 2019 at 3:34 pm #1149301
    evilmc

    Somebody to help me with this problem?

    October 20, 2019 at 8:23 pm #1149653
    Mike

    Hi,
    Sorry for the late reply, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #top.page-id-5813 #av_section_2 > div > div > div > div > div > div.avia-data-table-wrap.avia_responsive_table > table > tbody > tr.avia-heading-row > th:nth-child(1),
#top.page-id-5813 #av_section_2 > div > div > div > div > div > div.avia-data-table-wrap.avia_responsive_table > table > tbody > tr > td:nth-child(1),
#top.page-id-5813 #av_section_2 > div > div > div > div > div > div.avia-data-table-wrap.avia_responsive_table > table > tbody > tr.avia-heading-row > th:nth-child(3),
#top.page-id-5813 #av_section_2 > div > div > div > div > div > div.avia-data-table-wrap.avia_responsive_table > table > tbody > tr > td:nth-child(3) {
	width: 15% !important;
}
#top.page-id-5813 #av_section_2 > div > div > div > div > div > div.avia-data-table-wrap.avia_responsive_table > table > tbody > tr.avia-heading-row > th:nth-child(2),
#top.page-id-5813 #av_section_2 > div > div > div > div > div > div.avia-data-table-wrap.avia_responsive_table > table > tbody > tr > td:nth-child(2) {
	width: 70% !important;
}

    Best regards,
    Mike

    October 21, 2019 at 12:48 pm #1149846
    evilmc

    Thank you, Mike!

    Desktop version is perfect! But now I have problem with responsive. Can you help me with that to fix?

    • This reply was modified 5 years, 1 month ago by evilmc. Reason: I found new issues
    October 22, 2019 at 11:56 am #1150131
    Mike

    Hi,
    Glad this helped, please change the above css to this:

    @media only screen and (min-width: 768px) { 
#top.page-id-5813 #av_section_2 > div > div > div > div > div > div.avia-data-table-wrap.avia_responsive_table > table > tbody > tr.avia-heading-row > th:nth-child(1),
#top.page-id-5813 #av_section_2 > div > div > div > div > div > div.avia-data-table-wrap.avia_responsive_table > table > tbody > tr > td:nth-child(1),
#top.page-id-5813 #av_section_2 > div > div > div > div > div > div.avia-data-table-wrap.avia_responsive_table > table > tbody > tr.avia-heading-row > th:nth-child(3),
#top.page-id-5813 #av_section_2 > div > div > div > div > div > div.avia-data-table-wrap.avia_responsive_table > table > tbody > tr > td:nth-child(3) {
	width: 15% !important;
}
#top.page-id-5813 #av_section_2 > div > div > div > div > div > div.avia-data-table-wrap.avia_responsive_table > table > tbody > tr.avia-heading-row > th:nth-child(2),
#top.page-id-5813 #av_section_2 > div > div > div > div > div > div.avia-data-table-wrap.avia_responsive_table > table > tbody > tr > td:nth-child(2) {
	width: 70% !important;
}
}

    This will make not work for mobile devices because the table layout is different for mobile. Is the mobile layout acceptable?

    Best regards,
    Mike

    October 26, 2019 at 2:32 pm #1151355
    evilmc
    This reply has been marked as private.
    October 26, 2019 at 4:51 pm #1151374
    Mike

    Hi,
    Please try adding this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    @media only screen and (max-width: 767px) { 
	#top.page-id-5813 #av_section_2 > div > div > div > div > div > div.avia-data-table-wrap.avia_responsive_table > table > tbody > tr.avia-heading-row > th:nth-child(1),
#top.page-id-5813 #av_section_2 > div > div > div > div > div > div.avia-data-table-wrap.avia_responsive_table > table > tbody > tr > td:nth-child(1),
#top.page-id-5813 #av_section_2 > div > div > div > div > div > div.avia-data-table-wrap.avia_responsive_table > table > tbody > tr.avia-heading-row > th:nth-child(3),
#top.page-id-5813 #av_section_2 > div > div > div > div > div > div.avia-data-table-wrap.avia_responsive_table > table > tbody > tr > td:nth-child(3) {
	margin: auto !important;
}
#top.page-id-5813 #av_section_2 > div > div > div > div > div > div.avia-data-table-wrap.avia_responsive_table > table > tbody > tr.avia-heading-row > th:nth-child(2),
#top.page-id-5813 #av_section_2 > div > div > div > div > div > div.avia-data-table-wrap.avia_responsive_table > table > tbody > tr > td:nth-child(2) {
	margin: auto !important;
}
}

    Best regards,
    Mike

    October 26, 2019 at 10:21 pm #1151413
    evilmc

    I add and this CSS code not work.

    October 26, 2019 at 11:57 pm #1151423
    Mike

    Hi,
    Perhaps you have a missing bracket in your css, it’s working in my tests, Please see the screenshot in Private Content area.
    Please include an admin login in the Private Content area so we can check.

    Best regards,
    Mike

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.