CODEWITHSUNDEEP
htmlcsszurb-foundation
Ne Kr
Ne Kr

Reputation: 208

Padding on picture when under 596px

I am making a test site to practice Practice Page. I have set up a logo and a picture in the foundation framework for emails. The site is responsive now. The picture with the racoon there is a padding on 40px on the top and bottom. When I go down under 596px there is still the padding even if I tried to set the padding to 0px.

When I reach 596 px I need to padding to go to 0px, but why does that not work now? I can make it work setting a !important on media only screen. But that is bad coding behaviour, right?

There is a lot of CSS in the framework. Therefore I made a fiddle

Desktop CSS

.img-position {
    padding:40px 0px 40px 0px;
}

Mobile CSS

@media only screen and (max-width: 596px) {
    .img-position {
        padding:0px 0px 0px 0px;
    }
}

HTML

<body>
  <table class="body" data-made-with-foundation>
    <tr>
      <td class="float-center" align="center" valign="top">
        <center>
          <!-- Logo Start -->
          <table align="center" class="wrapper header float-center background-color__white">
            <tbody>
              <tr>
                <td class="wrapper-inner">
                  <table align="center" class="container" style="background-color:transparent">
                    <tbody>
                      <tr>
                        <td>
                          <table class="row collapse">
                            <tbody>
                              <tr>
                                <th class="img-headline">
                                  <center>
                                    <a href="http://smalldanishhotels.dk/"><img src="http://www.fontmagic.com/files/animal-silence.gif" alt="TestPicture" align="center" class="float-center" width="250" height="80"></a>
                                </center>
                                </th>
                                <th class="expander"></th>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
          <!-- Logo End -->
          <!-- Top Picture Start -->
          <table class="row background-color__blue">
            <tr>
              <td class="center img-position" align="center">
                <center>
                  <table class="container">
                    <tr>
                      <td class="wrapper last">
                        <table class="twelve columns">
                          <tr>
                            <td>
                              <img width="580" height="300" src="http://animalhumanhealth.com/wp-content/uploads/2016/07/racoon1.png">
                          </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                </center>
              </td>
            </tr>
          </table>
          <!-- Top Picture End -->



          <!-- Row 1 End -->


          <!-- Email Button End -->
        </center>
      </td>
    </tr>
  </table>
</body>

Upvotes: 3

Views: 74

Answers (3)

vedankita kumbhar
vedankita kumbhar

Reputation: 1490

Add 

.img-position {
   padding:40px 0px 40px 0px;
 }

above media queries which you have defined. Here is working fiddle working fiddle

Upvotes: 2

godblessstrawberry
godblessstrawberry

Reputation: 5058

here's working example https://jsfiddle.net/sdk3dsyt/ your @media-query goes before you defined the initial paddings, that is why your @media-query rules are overriden

When more than 1 overlapping styles are applied to the same element, only the last style is visible https://developer.tizen.org/dev-guide/web/2.3.0/org.tizen.mobile.web.appprogramming/html/guide/w3c_guide/dom_guide/html_priorities_css.htm

Upvotes: 1

Hamza Ishak
Hamza Ishak

Reputation: 360

The padding (or the space) that appears at 596px originates from the container class here: 

table.body .container {
    width: 95% !important;
}

So change the above to: 

table.body .container {
   width: 100% !important;
}

Upvotes: 1

Related Questions