CODEWITHSUNDEEP
htmlcsswordpressresponsive-designhtml-table
Mustafa jD
Mustafa jD

Reputation: 13

Table goes out of screen in mobile devices in Wordpress

I am making a WordPress site using a theme.

Page with Pricing Table - open in Mobile device to Check mobile Device Layout

I'm putting a Price table in it which goes out of the section.

Your can see below how last column is going out of screen.

SS

table {
  border: 3px solid;
}
<table style="">
  <tbody>
    <tr>
      <th style="text-align: center;">Area</th>
      <th style="text-align: center;">Single</th>
      <th style="text-align: center;">5 Session (6
        <sup>th</sup>Free)</th>
    </tr>
    <tr>
      <td style="text-align: left;">Full Face (exc. Neck)</td>
      <td style="text-align: center;"><span style="color: #dd9933;"><strong>£95</strong></span>
      </td>
      <td style="text-align: center;"><span style="color: #dd9933;"><strong>£450</strong></span>
      </td>
    </tr>
    <tr>
      <td style="text-align: left;">Full Face (inc. Neck)</td>
      <td style="text-align: center;"><span style="color: #dd9933;"><strong>£145</strong></span>
      </td>
      <td style="text-align: center;"><span style="color: #dd9933;"><strong>£700</strong></span>
      </td>
    </tr>
    <tr>
      <td>Half Face</td>
      <td style="text-align: center;"><span style="color: #dd9933;"><strong>£75</strong></span>
      </td>
      <td style="text-align: center;"><span style="color: #dd9933;"><strong>£350</strong></span>
      </td>
    </tr>
    <tr>
      <td>Full Neck</td>
      <td style="text-align: center;"><span style="color: #dd9933;"><strong>£60</strong></span>
      </td>
      <td style="text-align: center;"><span style="color: #dd9933;"><strong>£275</strong></span>
      </td>
    </tr>
    <tr>
      <td>Chin/Jawline/Sides</td>
      <td style="text-align: center;"><span style="color: #dd9933;"><strong>£45</strong></span>
      </td>
      <td style="text-align: center;"><span style="color: #dd9933;"><strong>£200</strong></span>
      </td>
    </tr>
    <tr>
      <td>Upper Lip</td>
      <td style="text-align: center;"><span style="color: #dd9933;"><strong>£40</strong></span>
      </td>
      <td style="text-align: center;"><span style="color: #dd9933;"><strong>£175</strong></span>
      </td>
    </tr>
    <tr>
      <td>Upper Lip &amp; Chin</td>
      <td style="text-align: center;"><span style="color: #dd9933;"><strong>£75</strong></span>
      </td>
      <td style="text-align: center;"><span style="color: #dd9933;"><strong>£350</strong></span>
      </td>
    </tr>
    <tr>
      <td>Center Brow</td>
      <td style="text-align: center;"><span style="color: #dd9933;"><strong>£20</strong></span>
      </td>
      <td style="text-align: center;"><span style="color: #dd9933;"><strong>£90</strong></span>
      </td>
    </tr>
    <tr>
      <td>Nose</td>
      <td style="text-align: center;"><span style="color: #dd9933;"><strong>£20</strong></span>
      </td>
      <td style="text-align: center;"><span style="color: #dd9933;"><strong>£90</strong></span>
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Views: 1936

Answers (1)

dippas
dippas

Reputation: 60603

on your styles.css line 1561 you have this:

.wpb_content_element table, .vacancy_table, .wp_content table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

you need to add table-layout:fixed to that rule declaration.

.wpb_content_element table, .vacancy_table, .wp_content table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  table-layout: fixed
}

Upvotes: 1

Related Questions