Responsive “stack” not breaking correctly

  • Resolved Roger Due

    (@sunshineahead)


    3 years, 9 months ago

    I will be more than happy to make a significant contribution, yet I would like to see this issue resolved so that I can use multiple columns in a responsive environment.

    One of my clients is turning work away because they don’t have enough truck drivers. We want to put targeted advertising images at the top of the Home page that will go to specific pages when clicked on. I have already put together a proof of concept page at
    rd7.us/test2
    [table id=2 responsive=”stack” /]
    I just grabbed one of their images to illustrate. This site was cloned from their current working site while I make a lot of enhancements. Most truck drivers use their phone to connect to the internet, which is why we want this advertising at the top of the Home page.

    Everything works great, except for one nasty issue that is easy to demonstrate. If you start reducing the width of the browser, you will see the normal responsive behavior. BUT the problem occurs shortly after you shrink the width of the browser window to just show the 5 columns. As you keep shrinking the browser window width, more than half of the image on the right will be cut off before the 5 columns switch to stacked.

    My guess is that you are not calculating the entire width of the centered 5 columns correctly. Can you please take a close look to see if this can be resolved?

    I’m using the Classic Editor with this theme since the original site was first developed starting back in 2013 & has gone thru many enhancements since then. I’ve spent many hours researching possible plugins to accomplish what the client wants and there seem to be very few choices available & yours seems to have the best reviews. I really would like to use TablePress once you resolve this issue & will then gladly make a significant contribution.
    — Thanks

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    The reason for this simply is that the switch to the stacked mode has nothing to do with the width of the images. It always happens when the screen width is smaller than 768 pixels. However, your images currently require a total width of 840 pixels right now.
    Now, my feeling is that you will not run into problems here in practice, except for cases where someone really is reducing the browser width – which can’t really happen on a phone.

    I would recommend this solution: Just let the images shrink a little between these two widths. For that, please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    .tablepress-id-2 img {
  max-width: 100%;
}

    Regards,
    Tobias

    Thread Starter Roger Due

    (@sunshineahead)

    Hi,
    That worked!!! Actually, I had seen the problem on either a tablet or phone, yet not sure which. I use Brave as my default browser on Win10 & learned long ago when using Chrome that I could shrink the width of the browser window to see how everything responded to the various widths. This theme has a lot of tuning parameters for responsive that also let me adjust the font height & other parameters as I shrink to lower widths.

    As I promised, I will be sending you a donation shortly.
    — Thanks

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    no problem, you are very welcome! ?? Good to hear that this helped!
    And thanks for the donation, I really appreciate it!

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Responsive “stack” not breaking correctly’ is closed to new replies.