CODEWITHSUNDEEP
htmlcss
fashioncoder
fashioncoder

Reputation: 89

Email html template mobile padding issues

I'm a newbie to HTML & CSS, and sincerely apologise in advance if this question is a nuance - I've tried to google extensively to find the fix with no luck!

My email html template is here. My issue is:

The top & bottom padding around the background image in the email is too large on mobile (desktop it's fine). I can't figure out how to reduce it. All padding in the html seems to be either 0 or 10, so completely unsure of what the cause is.

                            <div id="iwvdj" style="box-sizing: border-box; line-height: inherit; margin: 20px; padding: 10px;">
                            <div id="ihp1e" class="layout__inner" style="box-sizing: border-box; line-height: inherit; background-color: #FFFFFF; background-image: url(https://i1.createsend1.com/ei/t/27/B05/4C2/070244/csfinal/bf6ce21fcf8cefe14ab96f8512fe9c85.jpg); background-repeat: no-repeat; background-size: contain; background-position: center center;">
                                <!--[if (mso)|(IE)]><table align="center" cellpadding="0" cellspacing="0" role="presentation"><tr class="layout-fixed-width" style="background: 0px 0px/auto auto repeat url(https://i1.createsend1.com/ei/t/27/B05/4C2/070244/csfinal/bf6ce21fcf8cefe14ab96f8512fe9c85.jpg) #4b5462;background-position: 0px 0px;background-image: url(https://i1.createsend1.com/ei/t/27/B05/4C2/070244/csfinal/bf6ce21fcf8cefe14ab96f8512fe9c85.jpg);background-repeat: repeat;background-size: auto auto;background-color: #4b5462;"><td style="width: 600px" class="w560"><![endif]-->
                                <div id="i6bgh" class="column" style="box-sizing: border-box; transition-duration: 0.25s, 0.25s; transition-timing-function: ease-in-out, ease-in-out; transition-delay: initial, initial; transition-property: width, max-width; text-align: left; color: #414141; font-size: 14px; line-height: 21px; font-family: Cabin,Avenir,sans-serif; max-width: 400px; width: 100%;">
                                    <div id="in9ah" style="box-sizing: border-box; line-height: inherit; Margin-left: 20px; Margin-right: 20px;">
                                        <div id="i2rdl" style="box-sizing: border-box; line-height: inherit; Margin-left: 20px; Margin-right: 20px;">
                                            <div id="ijhss" style="box-sizing: border-box; mso-line-height-rule: exactly; line-height: 484px; font-size: 1px;">&nbsp; </div>
                                        </div>
                                    </div>
                                </div>
                                <!--[if (mso)|(IE)]></td></tr></table><![endif]-->
                            </div>
                        </div>

Upvotes: 0

Views: 104

Answers (2)

CanUver
CanUver

Reputation: 1774

I don't know if you wrote the codes, but there's too much, too much inline css. Never is not an accurate method. The problem is: the photo doesn't have its own height. Provides height with line-height. I set the height of line height, which is normally 484px, to 300px. Has been you want.

<div id="ijhss" style="box-sizing: border-box; mso-line-height-rule: exactly; line-height: 300px; font-size: 1px;">&nbsp; </div>




 style="box-sizing: border-box; line-height: inherit; background-color: #FFFFFF; background-image: url(https://i1.createsend1.com/ei/t/27/B05/4C2/070244/csfinal/bf6ce21fcf8cefe14ab96f8512fe9c85.jpg); background-repeat: no-repeat; background-size: contain; background-position: center center; height: 300px;">


<div id="iwvdj" style="box-sizing: border-box; line-height: inherit; margin: 20px; padding: 10px;">
  <div id="ihp1e" class="layout__inner" style="box-sizing: border-box; line-height: inherit; background-color: #FFFFFF; background-image: url(https://i1.createsend1.com/ei/t/27/B05/4C2/070244/csfinal/bf6ce21fcf8cefe14ab96f8512fe9c85.jpg); background-repeat: no-repeat; background-size: contain; background-position: center center;">
    <!--[if (mso)|(IE)]><table align="center" cellpadding="0" cellspacing="0" role="presentation"><tr class="layout-fixed-width" style="background: 0px 0px/auto auto repeat url(https://i1.createsend1.com/ei/t/27/B05/4C2/070244/csfinal/bf6ce21fcf8cefe14ab96f8512fe9c85.jpg) #4b5462;background-position: 0px 0px;background-image: url(https://i1.createsend1.com/ei/t/27/B05/4C2/070244/csfinal/bf6ce21fcf8cefe14ab96f8512fe9c85.jpg);background-repeat: repeat;background-size: auto auto;background-color: #4b5462;"><td style="width: 600px" class="w560"><![endif]-->
    <div id="i6bgh" class="column" style="box-sizing: border-box; transition-duration: 0.25s, 0.25s; transition-timing-function: ease-in-out, ease-in-out; transition-delay: initial, initial; transition-property: width, max-width; text-align: left; color: #414141; font-size: 14px;  font-family: Cabin,Avenir,sans-serif; max-width: 400px; width: 100%;">
      <div id="in9ah" style="box-sizing: border-box; line-height: inherit; Margin-left: 20px; Margin-right: 20px;">
        <div id="i2rdl" style="box-sizing: border-box; line-height: inherit; Margin-left: 20px; Margin-right: 20px;">
          <div id="ijhss" style="box-sizing: border-box; mso-line-height-rule: exactly; line-height: 300px; font-size: 1px;">
            &nbsp; </div>
        </div>
      </div>
    </div>
    <!--[if (mso)|(IE)]></td></tr></table><![endif]-->
  </div>
</div>

Upvotes: 1

learningtoanimate
learningtoanimate

Reputation: 934

You need to change your margins on iwvdj because they're what's affecting the image. The image itself isn't padded.

Instead of

<div id="iwvdj" style="box-sizing: border-box; line-height: inherit; margin: 20px; padding: 0px;">

Try 

<div id="iwvdj" style="box-sizing: border-box; line-height: inherit; margin: 0 0 20px 20px; padding: 0px;">

This will set your top and bottom margins to 0.

Upvotes: 0

Related Questions