CODEWITHSUNDEEP
htmlcss
Tsiskreli
Tsiskreli

Reputation: 103

Table borders strange behavior

I have template for e-mail list, in html + css.

http://tsiskreli.highlander.ge/next.html

Here it is. There is no php, javascript, only html and css everything in this file. In all browsers (chrome, firefox, explorer) I see it fine, top text is in right place and table looks fine. My costumer sees it so: http://s1.postimg.org/7c4iffav3/image004.jpg

I see it so even with 300% zoom:

http://s21.postimg.org/t1jltp0fb/Screenshot_12.jpg

Why my costumer sees this empty space in at the border and why reservation goes down for him?

Upvotes: 0

Views: 73

Answers (2)

Maen
Maen

Reputation: 10698

This media query is causing the padding :

@media only screen and (max-width: 480px){
    td[class=mcnTextContent] {    
        padding-right: 18px !important;
        padding-left: 18px !important;
    }
}

Remarks :

  • Don't duplicate the media query for each property: you can group them all inside one.
  • Use !important with caution.
  • Don't use table for layout, and especially not like this: your html structure is a mess.
  • Consider adding the relevant code in your question by the way.

Upvotes: 1

Iqbal Fauzi
Iqbal Fauzi

Reputation: 1571

Because you ask the CSS to do so. Try to view it under 480px screen and you will get the some result as your customer. After inspecting your CSS i found this :

@media only screen and (max-width: 480px){
    td[class=mcnImageCardLeftImageContent],td[class=mcnImageCardRightImageContent]{
        padding-right:18px !important; /* This is it */
        padding-left:18px !important;  /* This is it */
        padding-bottom:0 !important;
    }

Upvotes: 1

Related Questions