• Resolved blackflamingo

    (@blackflamingo)


    Hi,
    I have the table with id “49” (“Elektronik & Automatisierungstechnik”) where I need to reduce the table width for column 3 depending on screen resolution, the table is on mobile phones too large, in vertical orientation it’s a little wider than the screen, in horizontal orientation the text runs behind the image and reduces the image size.
    Can you help?
    responsive tables is installed.
    Thanks ahead,
    Torsten

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

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

    (@tobiasbg)

    Hi,

    thanks for your question, and sorry for the trouble.

    I’m not really sure why the text overflows into the image here, but to reduce the image size on small screens, you could use

    .tablepress-id-39 .column-3 img {
      max-width: 100%;
    }

    As a side note: That HTML structure in the second column is very complex and inefficient. I think you will have it much easier in the future, if you use HTML <ul> and <li> elements here, as this is a list and should therefore be written as one. You will then no longer need all the transparent images or non-breaking spaces.

    Regards,
    Tobias

    Thread Starter blackflamingo

    (@blackflamingo)

    Hi Tobias,
    thanks for your fast replie.
    What I would want to achieve is reducing the width of the Text “Netzwerk- und Telekommunikationstechnik” and “Steuer-, Regelungs- und Antriebstechnik” for screen sizes below 700px.
    The text is in column 3, column 4 is the image. Is .column-3 img correct? I’ve set the above code with id-49 within the custom css of the plugin but this doesn’t do the trick…
    Your support is very much appreciated.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    yes, that code is correct, and it’s working for me. There is still some overflow of the text into the image, but at least the image is not overflowing outside the table anymore.

    Unfortunately, I don’t see a way to reduce the width of the text, because you are disallowing automatic line breaks in that text. That’s why I suggest to use real HTML lists here, as that would give you more options, and nicer HTML code.

    Regards,
    Tobias

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Table max-width depending on screen size’ is closed to new replies.