Table doesnt responsive in mobile

Hi,

thanks for your question, and sorry for the trouble.

This is the classical problem of responsiveness. The content in the table simply does not fit on small screens. You could try the approaches that the TablePress Extension from https://tablepress.org/extensions/responsive-tables/ offers.

Regards,
Tobias

Hi,

you might want to add the CSS property white-space:nowrap; to your buttons, to prevent these automatic line breaks. (I would actually suggest that you give your spans a CSS class and then use that in “Custom CSS”. That’s much easier and faster than using inline CSS code.)

Regards,
Tobias

Hi,

on https://core.trac.ww.wp.xz.cn/changeset/40262 , please make the modification to the button HTML code and CSS that I posted above.
That will help with the buttons staying in one line of text.

Just copying the CSS of the other site will not help at all. Responsiveness depends on the size of the content in the tables.

Regards,
Tobias

Hi,

ah, I just noticed that I posted the wrong URL above… I meant your page https://tinyurl.com/hjnxdat
In the table, replace
<span style="background-color: #FF5722; color: #fff;padding: 5px 18px; text-decoration: none;border-radius: 8px; text-transform: capitalize;">Check Price</span>
with

<span class="price-button">Check Price</span>

Then, add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress .price-button {
  background-color: #FF5722;
  color: #fff;
  padding: 5px 18px;
  text-decoration: none;
  border-radius: 8px;
  text-transform: capitalize;
  white-space: nowrap;
}

Regards,
Tobias

Hi deepak543,

please let’s keep this at https://ww.wp.xz.cn/support/topic/responsive-view-on-demo-site/ where I already replied to your question.

Regards,
Tobias