Jump to content

HTML Code Block Table - How to auto resize to fit mobile?

Recommended Posts

Hello, for a page in my website it needed a table to hold information. I managed to look online and convert the table from a Word Document to HTML code and used the code in a code block for it to work on Squarespace. The code works great and it looks great on desktop, but on mobile it is not user friendly as it does not auto fit the screen which I am unsure what to do to fix this. 

Here is the code:

<table class=mytable>
  <table border="1" cellspacing="0" cellpadding="20">
    <tbody>
        <tr>
            <td width="260" valign="top">
                <p>
                    <strong>Table 1: </strong>
                    <strong>Purpose/Activity</strong>
                </p>
            </td>
            <td width="260" valign="top">
                <p>
                    <strong>Type of data</strong>
                </p>
            </td>
            <td width="260" valign="top">
                <p>
                    <strong>
                        Lawful basis for processing including basis of
                        legitimate interest
                    </strong>
                </p>
            </td>
        </tr>
        <tr>
            <td width="227" valign="top">
                <p>
                    To register you as a new investor
                </p>
            </td>
            <td width="173" valign="top">
                <p>
                    (a) Identity
                </p>
                <p>
                    (b) Contact
                </p>
                <p>
                    (c) Qualifications and financial standing
                </p>
            </td>
            <td width="273" valign="top">
                <p>
                    (a) Performance of a contract with you, for the provision
                    of our products and/or services or making arrangements in
                    order to enter into a contract.
                </p>
                <p>
                    (b) Necessary to comply with our legal and regulatory
                    obligation
                </p>
            </td>
        </tr>
        <tr>
            <td width="227" valign="top">
                <p>
                    To process and deliver your transaction and investment
                    including:
                </p>
                <p>
                    (a) Manage payments, investments, fees and charges
                </p>
                <p>
                    (b) Collect and process investment subscriptions
                </p>
            </td>
            <td width="173" valign="top">
                <p>
                    (a) Identity
                </p>
                <p>
                    (b) Contact
                </p>
                <p>
                    (c) Financial
                </p>
                <p>
                    (d) Transaction
                </p>
                <p>
                    (e) Marketing and Communications
                </p>
            </td>
            <td width="273" valign="top">
                <p>
                    (a) Performance of a contract with you, for the provision
                    of our products and/or services
                </p>
            </td>
        </tr>
        <tr>
            <td width="227" valign="top">
                <p>
                    To manage our relationship with you which will include:
                </p>
                <p>
                    (a) Notifying you about changes to our terms or privacy
                    policy
                </p>
                <p>
                    (b) To carry out the appropriate background checks to
                    fulfil our legal and regulatory investor due diligence
                    requirements
                </p>
                <p>
                    (c) Reporting on your investments in our products to you
                </p>
                <p>
                    (d) Arranging statutory and regulatory filings on your
                    behalf
                </p>
            </td>
            <td width="173" valign="top">
                <p>
                    (a) Identity
                </p>
                <p>
                    (b) Contact
                </p>
                <p>
                    (c) Qualifications and financial standing
                </p>
                <p>
                    (d) Profile
                </p>
                <p>
                    (e) Transaction
                </p>
                <p>
                    (f) Communications
                </p>
            </td>
            <td width="273" valign="top">
                <p>
                    (a) Performance of a contract with you, for the provision
                    of our products and/or services
                </p>
                <p>
                    (b) Necessary to comply with our legal and regulatory
                    obligation
                </p>
                <p>
                    (c) Necessary to comply with our product’s legal and
                    regulatory obligation
                </p>
                <p>
                    (d) Necessary for our legitimate interests (to keep our
                    records updated and to maintain current and accurate
                    investor records)
                </p>
            </td>
        </tr>
        <tr>
            <td width="227" valign="top">
                <p>
                    To deliver relevant website content and information to you
                    and measure the effectiveness of the materials and
                    communications we provide to you
                </p>
            </td>
            <td width="173" valign="top">
                <p>
                    (a) Identity
                </p>
                <p>
                    (b) Contact
                </p>
                <p>
                    (c) Profile
                </p>
                <p>
                    (d) Usage
                </p>
                <p>
                    (e) Marketing and Communications
                </p>
                <p>
                    (f) Technical
                </p>
            </td>
            <td width="273" valign="top">
                <p>
                    (a) Necessary for our legitimate interests (to study how
                    customers use our products/services, to develop our
                    products/services, to grow our business and to inform our
                    marketing strategy)
                </p>
            </td>
        </tr>
        <tr>
            <td width="227" valign="top">
                <p>
                    To use data analytics to improve our website, services,
                    marketing, customer relationships and experiences
                </p>
            </td>
            <td width="173" valign="top">
                <p>
                    (a) Technical
                </p>
                <p>
                    (b) Usage
                </p>
            </td>
            <td width="273" valign="top">
                <p>
                    (a) Necessary for our legitimate interests (to define types
                    of customers for our products and services, to keep our
                    website updated and relevant, to develop our business and
                    to inform our marketing strategy)
                </p>
            </td>
        </tr>
        <tr>
            <td width="227" valign="top">
                <p>
                    To make suggestions to you about services or investments
                    that we believe may be of interest to you
                </p>
            </td>
            <td width="173" valign="top">
                <p>
                    (a) Identity
                </p>
                <p>
                    (b) Contact
                </p>
                <p>
                    (c) Technical
                </p>
                <p>
                    (d) Usage
                </p>
                <p>
                    (e) Profile
                </p>
            </td>
            <td width="273" valign="top">
                <p>
                    (a) Necessary for our legitimate interests to develop our
                    services and grow our business
                </p>
            </td>
        </tr>
        <tr>
            <td width="227" valign="top">
                <p>
                    To arrange transactions or an engagement either with you or
                    an entity which you represent
                </p>
            </td>
            <td width="173" valign="top">
                <p>
                    (a) Identity
                </p>
                <p>
                    (b) Contact
                </p>
                <p>
                    (c) Qualifications and financial standing
                </p>
            </td>
            <td width="273" valign="top">
                <p>
                    (a) Necessary to comply with our legal and regulatory
                    obligations
                </p>
                <p>
                    (b) Necessary for our legitimate interests to develop our
                    services and grow our business
                </p>
            </td>
        </tr>
    </tbody>
</table>

 

The width values are there as they fit the Squarespace desktop, I have a feeling those need changing but any attempt I have done does not work, it would be great for any help here! 

 

Thanks so much

Link to comment
  • Replies 1
  • Views 437
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.