Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • #1170111

    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?

    #1170194

    Hey illerrre,

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

    Best regards,
    Rikard

    #1170210

    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.

    #1170324

    Hi illerrre,

    Best regards,
    Victoria

    #1170406

    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.

    #1170595

    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

    #1170704

    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?

    #1170962

    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

    #1171020

    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?

    #1171096

    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.

    #1171299

    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

    #1171486

    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.

    #1171697

    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

    #1171786

    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?

    #1171801

    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.
    #1172051

    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

    #1172111

    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.

    #1172612

    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

    #1172722

    Ah, I see. Much to learn :)

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

    #1173036

    Hi,

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

    Best regards,
    Jordan Shannon

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