Centered Table Responsive Overlapping Edge

  • Resolved armandoarrastia

    (@armandoarrastia)


    4 years, 5 months ago

    Hi Tobias. I’ve got a table in which I’ve inserted a script to import a badge from another service. I’ve used the responsive plugin to mode “stack” the table, and I’ve inserted the CSS referenced in your support that reduces the size and centers the table.

    You can see the table on the referenced page. it looks fine on desktop, but on iPhone 6s, the table content appears right-justified rather than centered, and the image that populates through the script is overlapping the right side of the screen. Here’s a screenshot: https://www.screencast.com/t/rm8NsmLPxW

    I realize the issue may not be with TablePress, but with the size of the image that results from the script. But I thought I would check with you, since it does appear the image would fit within the left and right margins of the mobile phone screen. So hopefully there is an easy remedy.

    Here is a screenshot of the code within the table: https://www.screencast.com/t/QxzgNmxAoP

    And here is a screenshot of ALL the CSS I’ve inserted in the Plugin Options section, where the code for this specific table begins on line 56: https://www.screencast.com/t/AI1tsWEek

    I hope all the screenshots help and save you time in responding.

    Thanks for your continued and awesome support.

    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 post, and sorry for the trouble.

    Yes, it looks like that width is defined by the HTML that is inserted by your JS code. You could however try to influence that, e.g. add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    .tablepress td div a.romw-badge-single {
	width: 100%;
}

    Regards,
    Tobias

    Thread Starter armandoarrastia

    (@armandoarrastia)

    Thank you, Sir. That worked perfectly!

    Great and VERY quick support.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

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

    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 ‘Centered Table Responsive Overlapping Edge’ is closed to new replies.