Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • January 3, 2020 at 7:50 pm #1170111
    illerrre

    Hi guys,

    I have a table with 4 columns (you can check it here. It works like a charm on high resolutions and on small ones, but not on devices between 1600px and 700px.

    Therefore I would like to change the breakingpoint to where the table changes to mobile view. How can i do this?

    January 4, 2020 at 6:28 am #1170194
    Rikard

    Hey illerrre,

    So you want it to break to 100% width starting at 1600 pixels?

    Best regards,
    Rikard

    January 4, 2020 at 10:28 am #1170210
    illerrre

    Hi,

    If 100% means the same as the mobile view then yes.. I don’t know how that is going to look, but at the same time I don’t know if I have any other alternative. With four columns and a sidebar I can’t make the table look good on resolutions between 700px and 1600px.

    January 4, 2020 at 7:24 pm #1170324
    Victoria

    Hi illerrre,

    Best regards,
    Victoria

    January 5, 2020 at 2:53 am #1170406
    illerrre

    Hi Victoria,

    Perhaps, but I don’t want that as that would make the design less appealing. I believe it’s better if the table can go mobile view on higher resolutions than the current limit which is 768px.

    January 6, 2020 at 2:31 am #1170595
    Ismael

    Hi,

    Thank you for following up.

    You can use this css code to adjust the breakpoint of the table element so that it responds the same as it does on mobile view.

    @media only screen and (max-width:1600px) {
 .responsive div .avia_responsive_table .avia-data-table table,
 .responsive div .avia_responsive_table .avia-data-table tbody,
 .responsive div .avia_responsive_table .avia-data-table tr,
 .responsive div .avia_responsive_table .avia-data-table td,
 .responsive div .avia_responsive_table .avia-data-table th {
  display:block;
  border-top:none;
  border-right:none;
  border-left:none;
  text-align:center
 }
}

    Best regards,
    Ismael

    January 6, 2020 at 2:31 pm #1170704
    illerrre

    Hi Ismael!

    Thanks a lot for the code. Works pretty good – just one problem. The top row goes above all other rows, which it doesn’t on mobile view. Switch between 1200px and 400px and you’ll see what I mean. Is it possible to have the code you posted adjusted so that the view is identical to the 400px one?

    January 7, 2020 at 8:47 am #1170962
    Ismael

    Hi,

    Thank you for the update.

    Try to add this code inside the css media query that we just created above.

    .responsive .avia_responsive_table .avia-data-table .avia-button-row, .responsive .avia_responsive_table .avia-data-table tr:first-child th {
    display: none;
}

.responsive .avia_responsive_table .avia-data-table td::before {
    display: block;
    font-style: italic;
    font-size: 11px;
}

    That should hide the default heading row and display the pseudo heading.

    Best regards,
    Ismael

    January 7, 2020 at 12:29 pm #1171020
    illerrre

    Thanks for helping out, Ismael, but unfortunately that did not work either. Now we more or less got back to the original design. Any idea?

    January 7, 2020 at 5:00 pm #1171096
    illerrre

    I’m a bit confused now.

    Regarding my other thread: https://kriesi.at/support/topic/responsive-sidebar-widget-how-can-i-get-this/

    The code you recently gave me in this thread is what is keeping the desktop design (overall one with main content and sidebar) appealing. More specifically this code:

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

    I changed it to apply on resolutions over 800px and now what I wrote in the other thread is fixed so that is absolute fantastic.

    However, I noticed that the code affected several of my font styles. I’m not sure why, but is there any way we can resolve this? I have for instance chosen font style for H1 under advanced styling. Also, styling on https://onlineterapi.nu/boka-tid/ was changed. “Emelie Bergström, Telefon, Skype, Email” was previously black and is now blue.

    January 8, 2020 at 2:12 am #1171299
    Ismael

    Hi,

    Thank you for following up.

    Did you place the code inside the css media query? 

    @media only screen and (max-width:1600px) {
   /* style here */
}

    Please make sure that there are no missing curly braces. Or post the login details in the private field so that we can check it.

    Best regards,
    Ismael

    January 8, 2020 at 3:15 pm #1171486
    illerrre

    Which is the css media query?

    I posted the code under general styling.

    You can login with the mentioned cridentials. Do, however, please provide me with info of the changes you are making as I’m writing everything down in an attempt to learn and keeping things structured.

    January 9, 2020 at 6:45 am #1171697
    Ismael

    Hi,

    Thank you for the info.

    We modified the code in the Quick CSS field a bit and disabled the Performance > File Compression settings temporarily. The table is now responding properly when the screen width is equal or less than 1600px. Please don’t forget to remove the browser cache before checking the page.

    Best regards,
    Ismael

    January 9, 2020 at 12:53 pm #1171786
    illerrre

    Hi Ismael,

    Thanks a lot – table looks great now!

    However, since you removed the following code:

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

    The content is no longer centered on the site, but very wide which looks terrible. I added this code again to get the content centered.

    However, when I’m doing this all of my font style settings are removed. Is there any way we can fix this?

    January 9, 2020 at 1:47 pm #1171801
    illerrre

    Just to clarify, I’m talking about the content on the entire site. Check these two images with and without the code included:

    With code

    https://ibb.co/Sn8146f

    Without code

    https://ibb.co/ys0Z0QQ

    • This reply was modified 5 years ago by illerrre.
    January 10, 2020 at 4:30 am #1172051
    Ismael

    Hi,

    The css media query lacks a closing curly brace, so it breaks the succeeding styles including the fonts. We added the closing brackets to correct the issue.

    Thank you for your patience.

    Best regards,
    Ismael

    January 10, 2020 at 12:03 pm #1172111
    illerrre

    Hi Ismael,

    Now the content is too wide again though. How can we fix this?

    As far as I can tell the following code has no purpose at all:

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

    When it was broken it did, however, manage to center the content on the site for some reason. You can see the differences in the two screenshots I posted. The site looks a thousand times better when it is centered.

    Is there any way this can be achieved with code without breaking the fonts? I can’t get it right by adjusting dimensions under general layout.

    January 13, 2020 at 2:33 am #1172612
    Ismael

    Hi,

    Thank you for following up.

    The Maximum Container width is currently set to 100%, which is why the site is wide or full width. Try to set it to 1310px.

    Best regards,
    Ismael

    January 13, 2020 at 11:57 am #1172722
    illerrre

    Ah, I see. Much to learn :)

    Thanks a lot, Ismael. Everything is perfect now. Awesome support!

    January 14, 2020 at 2:33 am #1173036
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 20 posts - 1 through 20 (of 20 total)
  • The topic ‘How to change breakpoint on table?’ is closed to new replies.