CODEWITHSUNDEEP
htmlcssresponsive-design
C M
C M

Reputation: 703

Email template div width is not changing with responsive media query

I have a email template getting generated dynamically, I want to make it responsive.

I can't make major change in structure.

here is my demo template link: http://jsbin.com/weyemida/1/watch

Please tell how to fix this.

Thanks in advance

Upvotes: 0

Views: 193

Answers (2)

Vince C
Vince C

Reputation: 878

You'll need to use media queries. When your browser is smaller than a certain width, change some css.

Like this:

CSS

@media all and (max-width: 550px) // Change css when page's width is smaller than 550px
{
    .contentdiv {
        width: 100%; //change the container's width
    }

    table {
        width: 100%; // Make it the width of the container's size
    }
}

JSBIN: http://jsbin.com/bijixiga/1/edit

Upvotes: 1

Mahmoude Elghandour
Mahmoude Elghandour

Reputation: 2931

try to just remove 

    <style type='text/css'>
    @media only screen and (max-device-width:450px) {
        div[class=contentdiv] {
            width: 450px !important;
        }
    }
    .contentdiv{width:500px}
</style>

Upvotes: 0

Related Questions