Images become tiny when resizing browser

  • Resolved EnPractica

    (@enpractica)


    6 years, 2 months ago

    When I resize the browser and make it smaller, the Image column shrinks indefinitely, even though I have the ‘scroll’ feature active and have defined the width of that column using CSS.

    Is there a way to set a min-width for the column, so that it shrinks to no smaller than 100px width?

    See link and click on the ‘Individual’ toggle.

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

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    6 years, 2 months ago

    Hi,

    thanks for your question, and sorry for the trouble.

    Yes, this is possible. Please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    .tablepress-id-1 img {
  min-width: 100px;
}

    Regards,
    Tobias

    Thread Starter EnPractica

    (@enpractica)

    6 years, 2 months ago

    Thanks for the quick reply. Unfortunately your code doesn’t work for me (it is currently placed in the CSS space of Plugin Options and you can see the images act the exact same way): See ‘Members’ section and toggle to ‘Individual’. Other suggestions?

    Best,
    Adam

    • This reply was modified 6 years, 2 months ago by EnPractica.
    Plugin Author Tobias Bäthge

    (@tobiasbg)

    6 years, 2 months ago

    Hi,

    ok, it looks like there’s a file access problem with the TablePress CSS files. That’s why your changes are not working right now.
    To fix this, please log in to your server via a FTP and navigate to the /wp-content directory. There, please delete the three CSS files

    tablepress-custom.css
tablepress-custom.min.css
tablepress-combined.min.css

    After that, please save the “Custom CSS” again, in the admin area. The setting should be applied then. You can also remove the chunk

    .tablepress-id-1 .column-N img {
	min-width: 100px;
	height: auto;
}

    as that will not work like that (without the N being changed to a column number). This was very close already though 🙂

    Regards,
    Tobias

    Thread Starter EnPractica

    (@enpractica)

    6 years, 2 months ago

    That worked great! Last question – how do I set a min-width for a column with just text? I tried this (and deleted those three CSS files and saved again), but it didn’t work:

    .tablepress-id-1 .column-5 {
	width: 300px;
	min-width: 200px;
}
    Plugin Author Tobias Bäthge

    (@tobiasbg)

    6 years, 2 months ago

    Hi,

    this approach does actually work. However, it seems that the min-width CSS property again “didn’t make” it into the files. Can you therefore please try deleting those files again, and save again?

    Regards,
    Tobias

    Thread Starter EnPractica

    (@enpractica)

    6 years, 2 months ago

    I tried again and it didn’t work – but I purged my CDN and the changes took effect. Which I should have thought of before!

    Thanks for the great support! I tried making a donation but Paypal won’t let me sign in from out the country (I don’t get their security check texts). Will be back in the US in a couple weeks and make a donation. 🙂

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    6 years, 2 months ago

    Hi,

    no problem, you are very welcome! 🙂 Good to hear that this helped!

    And thanks for wanting to donate, I really appreciate it!

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

    wihslock99

    (@wihslock99)

    6 years, 2 months ago

    I’m also facing the same problem and Whenever I tried to add 4 columns in the table, it’s not showing responsive in the mobile view. My website is showing the table of knife comparison.

    • This reply was modified 6 years, 2 months ago by wihslock99.
    Plugin Author Tobias Bäthge

    (@tobiasbg)

    6 years, 2 months ago

    Hi wihslock99,

    thanks for your post, and sorry for the trouble.

    You will need an approach for responsiveness. For some ideas, please see https://tablepress.org/extensions/responsive-tables/

    Regards,
    Tobias

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Images become tiny when resizing browser’ is closed to new replies.