Help with responsive CSS for mobile

[cydneywl]

Hello,

I’m not sure if this is the space to ask these types of questions, but I’m hoping I can find someone that can help me out :)

I’ve been designing mailchimp campaigns and have hit a snag trying to have responsive formatting for mobile and outlook. The design looks great on Desktop but the text wrapping isn’t responding the way that I would like it to.

Here’s one of my past newsletters: https://us13.campaign-archive.com/?u=31d123cddd69e5a8cf8f076c1&id=036f109647

You can see that there are 4 places in the sample newsletter where text and images are in the same box. It looks fine on desktop but as soon as you enter mobile the text distorts. Ideally, I would like the image to stack on top of the text when being viewed in a mobile device. I found this forum on here: https://litmus.com/community/discussions/1543-responsive-allowing-text-to-flow-around-images#

and implemented pieces of this code which helped in the mailchimp mobile preview but when sent to my mobile, the stacking doesn’t work (my mobile is a Samsung Galaxy S6 – Andriod – using Gmail).

This is my current code that I’m using in one of the blocks to try and get them to stack:

I’m really novice at this so sorry if the above looks sloppy or weird. Evidently, I also can’t seem to make my code display in plain text >_< maybe I'm a lost cause


@media only screen and (max-width:480px) { img { display:block; float:none; margin:0 auto 20px !important; } }

GreenFilmTip

Did you know that a production can use as much as a million sheets of paper over 6 months? Pledge Paperless for 2019 and save some trees! #GreenFilmTip: Go to Pledge Paperless to take the pledge today.




[Author]

Posts