Making a Table Layout Responsive

Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

mosassas

Thread Starter
Joined
Apr 7, 2017
Messages
4
Having a hard time to make a table layout responsive

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





<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>
 

colinsp

Colin
Joined
Sep 5, 2007
Messages
2,362
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).
 

JiminSA

Jim
Joined
Dec 15, 2011
Messages
3,407
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;)
 
Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

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 807,865 other people just like you!

Latest posts

Staff online

Members online

Top