1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Making a Table Layout Responsive

Discussion in 'Web Design & Development' started by mosassas, Apr 9, 2019.

  1. mosassas

    mosassas Thread Starter

    Joined:
    Apr 7, 2017
    Messages:
    4
    Having a hard time to make a table layout responsive
    [​IMG]
    Hi guys,



    So I created a layout successful through tables but I cannot make it into a responsive layout. It cuts the image rather than squeezing it inside the page. I know it's simple but I'm just a beginner. Any help will be appreciated.



    Thanks

    [​IMG]
    [​IMG]


    <table height="21" style="width: 100%;" align="center">

    <tbody>



    <tr>

    <td style="width: 30%;">

    <span>



    <h1>Simple</h1>

    <br>

    The right shade for your home

    </span>

    </td>

    <td style="width: 50%;">



    <img alt="" src="https://cdn.shopify.com/s/files/1/0078/3630/3426/files/Simple.png?1134" style="float: none;">



    </td>



    </tr>





    <tr>



    <td style="width: 50%;">



    <img alt="" src="https://cdn.shopify.com/s/files/1/0...c20371bf-f55e-4009-8697-1a8f3cc5590a.png?1111" style="float: none;">



    </td>





    <td style="width: 30%;">

    <span>



    <h1>Affordable</h1>

    <br>



    Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s



    </span>

    </td>





    </tr>



    <tr>

    <td style="width: 30%;">

    <span>



    <h1>Blinds</h1>

    <br>



    Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s



    </span>

    </td>

    <td style="width: 50%;">



    <img alt="" src="https://cdn.shopify.com/s/files/1/0078/3630/3426/files/blinds.png?1106" style="float: none;">



    </td>



    </tr>



    </tbody>

    </table>
     
  2. colinsp

    colinsp

    Joined:
    Sep 5, 2007
    Messages:
    2,248
    First Name:
    Colin
    Yoou shouldn't be using tables for layout this is what is causing part of your problem. You need to use CSS to do the layout and then this can deal with your image.

    Post your code in code tags so it makes it easier for us to look at and make some suggestions. (The code tag is the icon to the left of the disk in the toolbar).
     
  3. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,311
    First Name:
    Jim
    To support what @colinsp is saying, take a look at this article which gives you good reasons not to use tables and at this article, which although quite convoluted gives a good explanation as to why content can be cut instaed of fitted into limited screen resolutions;)
     
As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...

Short URL to this thread: https://techguy.org/1225607

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice