CODEWITHSUNDEEP
htmlcsspug
SDB_1998
SDB_1998

Reputation: 365

CSS in email template not centering div children

I have this email template in pug:

div(style={ display: 'flex', 'justify-content': 'center', 'flex-direction': 'row', 'text-align': 'center'})
            div.image_column
                a(href="#" target="_blank")
                    img.social_media_image(src= 'facebook.png' alt='Facebook')
            div.image_column
                a(href="#" target="_blank")
                    img.social_media_image(src= 'linkedin.png' alt='Linkedin')
            div.image_column
                a(href="#" target="_blank")
                    img.social_media_image(src= 'instagram.png' alt='Instagram')
            div.image_column
                a(href="#" target="_blank")
                    img.social_media_image(src= 'twitter.png' alt='Twitter')

locally the icons are perfectly showing in the center here is an image enter image description here

But in an email client like gmail the css attributes disappear. And when I inspect I see only these -> style="display:flex;text-align:center"

Does anyone have any idea why is that happening ? And does anyone have any suggestions on how to fix this ?

Upvotes: 0

Views: 292

Answers (1)

Sean
Sean

Reputation: 8058

Gmail doesn't support all Flexbox properties. For instance, flex-direction is not supported. Email client support for CSS features is very different and more limited than browser support.

You don't need Flexbox to align inline elements like <a> to center. You could just write this instead:

div(style='text-align: center;')
  a(href="#" target="_blank")
    img.social_media_image(src='facebook.png', alt='Facebook')
  a(href="#" target="_blank")
    img.social_media_image(src='linkedin.png', alt='Linkedin')
  a(href="#" target="_blank")
    img.social_media_image(src='instagram.png', alt='Instagram')
  a(href="#" target="_blank")
    img.social_media_image(src='twitter.png', alt='Twitter')

Upvotes: 1

Related Questions