1

I have website and i cannot make it responsive only header and footer are responsive I want to make img in tr make responsive without bootstrap. I have tried everyting,please help I am newbie in frontend 

tr.j {
    background: url('http://i.imgur.com/fN4yIQL.png') no-repeat;  position: relative; background-color: #fff; 


    width: 100%;
      border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;

    }



<tr class="j" >
            <td colspan="2"  valign="top" style="background: url('') no-repeat 50% 15%; background-size: 100px; padding-right: 10px; padding-top: 20px;width: 100%">

                <div class= "apps" >
                            <a href="http://icome.su/apps/ios"><img src="http://i.imgur.com/67E0pWQ.png" alt=""
style="max-width:100%;height:auto;"></a>

                            <a href="http://icome.su/apps/android"><img src="http://i.imgur.com/nBRwQKL.png" alt=""></a>
                        </div>


                <a href="http://icome.su" ><h4 id ="my2">Скачайте презентацию ваших  бизнес-возможностей</h4></a>
                <a href="http://icome.su"><h4 id ="my3">Зарегистрируйтесь на сайте iCome</h4></a>

            </td>



      </tr>

enter image description here

Sasha
  • 644
  • 8
  • 22
  • 1
    Just a little note: Try not to use tables for your layout, there are much better ways to create layouts with `div`'s etc. – Ruddy May 05 '15 at 09:07
  • 1
    First off all, stop using tables for creating layout. Second, create a jsfiddle with your code, it's easier to debug. – majorhavoc May 05 '15 at 09:07
  • @Sharath Daniel https://jsfiddle.net/#&togetherjs=vl6Tn7PuVC – Sasha May 05 '15 at 09:10
  • @Ruddy i have no time to make it with divs I should make it with tables – Sasha May 05 '15 at 09:11
  • @Sultan You will run into problems with tables, I would even go as far to say it is easier to create a website with `div`'s. Tables are designed for tabular data not layouts. – Ruddy May 05 '15 at 09:13

3 Answers3

1

You can try in responsive css: 

.apps a img{
         width: 100%;
    }
Vinayak
  • 415
  • 3
  • 21
  • `width: 100%` would make the image exceed it's natural size and would loose it's clarity. – Aaron May 05 '15 at 09:13
1

To Make an inline image responsive just add this to your css...

img {max-width: 100%;}
Aaron
  • 10,187
  • 3
  • 23
  • 39
1

Your error is naive: you are specifying the @media rules before the standard rule.

Since they have the same CSS Specificity, the latter wins.

Just copy your @media rules at the end of your CSS file (or <style> block), and they will work.

Running demo

Note that you have an error in one of your images.

Community
  • 1
  • 1
Andrea Ligios
  • 49,480
  • 26
  • 114
  • 243