Breaking elements in the mobile version

  • Resolved altcointrader

    (@altcointrader)


    6 years, 1 month ago

    Hello Tobias, hope you are well and you have survived the move to another apartment without any problems.

    I have a question about the elements that break in the table in the mobile version.
    Here a screenschot: https://imgur.com/a/Ax9AF

    In the last post you gave me this code:

    .tablepress-id-1 th,
.tablepress-id-1 td {
	border: 1px solid #cccccc;
}

    i add this line to the code, which i found in the support forum:
    white-space: nowrap;

    No more elements break with this line of code (nowrap), only the rating.
    Here a Screenshot, for example the icons are perfekt in line:
    https://imgur.com/a/K7YUY
    But the width doesn’t fit anymore from the columns on desktop.

    You gave me this code, for the width:

    .tablepress-id-1 .column-1 {
	width: 10.3%;
}

.tablepress-id-1 .column-2 {
	width: 17.3%;
}

.tablepress-id-1 .column-3 {
	width: 10.3%;
}
.
.
.

    What can I do now?
    • I just want everything in one line (icons, rating, text).
    • And the width of the three tables should be the same on the desktop.

    I hope you can help me, I am desperate. have already searched so much in the support forum.

    Kind regards :))

    The page I need help with: [log in to see the link]

Viewing 14 replies - 1 through 14 (of 14 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    6 years, 1 month ago

    Hi,

    thanks for your post, and sorry for the trouble.

    The nowrap code does not have an influence on the width (except if cells where already wrapping on the desktop).
    Now, I don’t see that code in the table, however, and I don’t see any ratings?

    Regards,
    Tobias

    Thread Starter altcointrader

    (@altcointrader)

    6 years, 1 month ago

    Hi Tobias,

    now i add the nowrap to this css:

    .tablepress-id-1 th,
.tablepress-id-1 td {
	border: 1px solid #cccccc;
	white-space: nowrap;
}

.tablepress-id-2 th,
.tablepress-id-2 td {
	border: 1px solid #cccccc;
	white-space: nowrap;
}

.tablepress-id-3 th,
.tablepress-id-3 td {
	border: 1px solid #cccccc;
	white-space: nowrap;
}

    on the top, there are 3 tabs “Anstehend” “Laufend” and “Abgeschlossen”, the 1st and 2nd table have the same witdh, but the 3th one have other witdh.

    Can it be because in the third table, under “End” there are sentences that are longer?

    Can we not fix the width that it is in a line, but still breaks when it becomes too tight?

    I also added a rating to each table now. The reason why a rating is not yet everywhere is because I want to solve the problem first.

    Plugin Author TobiasBg

    (@tobiasbg)

    6 years, 1 month ago

    Hi,

    thanks!

    I’m not sure why the ratings are not reacting to the nowrap. However, as we a <div> container in it, we can set its width:

    .tablepress .rating_form_wrap {
  width: 220px;
}

    to get everything to one line.

    Now, the problem with the equal widths: Browser simply don’t really like setting column widths for a table that is too wide for the screen already. They will then usually not follow those instructions and reduce the width. You could maybe try the !important flag as well, but I have no seen reliable results 🙁

    Regards,
    Tobias

    Thread Starter altcointrader

    (@altcointrader)

    6 years, 1 month ago

    Hi Tobias,

    Thanks, the star thing works great now. All in line.

    I’ll have to accept that the same width doesn’t work now. If you can think of a trick or something to make all three columns the same width, I’d be happy if you could tell me.

    Kind regards

    Thread Starter altcointrader

    (@altcointrader)

    6 years, 1 month ago

    Hello Tobias, I have another question

    now I try to insert buttons. These are not in the middle (vertical) of the table, you know why?

    with <center> I center the buttons horizontally. But they’re not centered vertically, am I doing something wrong? Everything else in the table is vertically centered.

    here a picture: https://imgur.com/a/jgUhz

    Plugin Author TobiasBg

    (@tobiasbg)

    6 years, 1 month ago

    Hi,

    it seems that the button has a margin. Please try adding this:

    .tablepress .button {
	margin: 0;
	vertical-align: middle;
}

    Regards,
    Tobias

    Thread Starter altcointrader

    (@altcointrader)

    6 years, 1 month ago

    Very well, everything works out fine.
    Have a nice evening!

    Plugin Author TobiasBg

    (@tobiasbg)

    6 years, 1 month ago

    Hi,

    no problem! Same to you!

    Best wishes,
    Tobias

    Thread Starter altcointrader

    (@altcointrader)

    6 years, 1 month ago

    Hello, Tobias, I have one last question. sorry for the troubble

    since we did something with the css, or only after I inserted the buttons, the table becomes very fuzzy on mobile (on smaller devices)

    what could be the reason for this, have you ever experienced something like this?

    here a picture: https://imgur.com/a/p8t1h

    if i remove the buttons, the table is clear and sharp. Is this a theme issue? Should i ask the theme support?

    Edit: now i see, if I deactivate the class “tablepress-scroll-wrapper”, it will be sharp. maybe it’s because of that?

    Plugin Author TobiasBg

    (@tobiasbg)

    6 years, 1 month ago

    Hi,

    that’s very strange, and to be honest, I can’t remember seeing something like this before. Sorry 🙁

    Regards,
    Tobias

    Thread Starter altcointrader

    (@altcointrader)

    6 years, 1 month ago

    It definitely comes from the plugin extension:
    TablePress Extension: Responsive Tables

    If I deactivate your extension, it’ll be razor-sharp.
    Any advice on what I can do?

    Edit: And if I deactivate the plugin and activate “Horizontal scrolling” without the plugin, it becomes blurry again. How weird is that :O

    Plugin Author TobiasBg

    (@tobiasbg)

    6 years, 1 month ago

    Hi,

    I still can’t reproduce this 🙁

    Regards,
    Tobias

    Thread Starter altcointrader

    (@altcointrader)

    6 years, 1 month ago

    Hello, Tboias

    Ok thank you vermy much tobias for your effort.

    I think i know what is the problem, it ist the “tabs” in combination with horizontal scroll.

    if i put the table outside of the 3 Tabs, it works..

    I think its a issue with the theme, now i decide to change my team from betheme to the7 because of this problem.

    Thank you very much
    Have a nice day

    Plugin Author TobiasBg

    (@tobiasbg)

    6 years, 1 month ago

    Hi,

    that could be possible, indeed. Sorry that you have all this trouble! 🙁

    Best wishes,
    Tobias

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Breaking elements in the mobile version’ is closed to new replies.