How to make proper responsive design - html

Question

I'm currently making responsive-design for the website. I've tried many ways to make it great. Unfortunately, it didn't work out for me.
Here is my html code:
<div class="custom" >
<table class="yslygi">
<tbody>
<tr>
<td><img src="/images/pencil.png" alt="" /></td>
<td><img src="/images/arrow.png" alt="" /></td>
<td><img src="/images/larry.png" alt="" /></td>
<td><img src="/images/arrow.png" alt="" /></td>
<td><img src="/images/tools.png" alt="" /></td>
<td><img src="/images/arrow.png" alt="" /></td>
<td><img src="/images/clock.png" alt="" /></td>
</tr>
And here is my CSS:
.yslygi tr:first-child td:nth-child(2n+1) {
width: 150px;
padding: 20px 0 11px;
}
yslygi {
text-transform: uppercase;
font-size: 13px;
font-weight: 600;
text-align: center;
}
Responsive-design image

Answer 1

to make a responsive website, first rule is never user Table layout, instead use div base column layout. If you are new to responsive stuff, I suggest get familiar with Bootstrap Framework. It have good community and a great documentation. Get yourself familiar how responsive work and what are basic coding structure you need to follow.

Answer 2

First of all don't use table, avoid tables when ever you can. flex is your friend when it comes to stuff like this.

Answer 3

Sometimes y good use a framework like bootstrap.. its easy to manage the content but if you want only mantain the HTML as the image use width percentage to keep the proportion on multiple devices
Td.arrowImage{width: 10%;}
Td.Image{width: 17%}
Td.img{width: 100%}
.yslygi{width: 100%}