Mobile Version 2-1 Column Issue

Hi,

I'm a bit new to Mobile media queries & having some problems with the layout. Basically I have  a desktop template ready which is displaying some blog posts with images on its left side. It won't look good if viewed on mobile devices (less than 480px width).

So I wanted to use 2-1 column layout as described http://www.campaignmonitor.com/guides/mobile/responsive/.

Can anybody please help me make it look better for the mobile devices.

Here is the code:

https://docs.google.com/document/d/1fUACvcfEl7xJGSFsOeRblWHyjkC2AQzzbD6dGT5ABKg/edit?usp=sharing

Any help would be highly appreciated.




Thanks,

Tahir

roshodgekiss roshodgekiss, 3 years ago

Hi there Tahir, I just took a look at your design in my browser by changing the media query expression to @media only screen and (max-width: 480px). It looks pretty good to me and the right-hand text is merging under the image just fine. Could you kindly clarify on what you would like to see improved?


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
mtkhan mtkhan, 3 years ago

Hi Rosanne,

Here is the link for litmus test.
https://litmus.com/pub/590b5f2

& here is the code.
https://html.litmus.com/email/?url=/sitevista/ebf4e24d-5eb8-4f1c-a6fb-5a74ae8e7003


I'm concerned about outlook issues & in some of the tests the blog posts are not rightly aligned as they should.

Footer social media icons are also having some alignment problems.

Thanks,

Tahir

roshodgekiss roshodgekiss, 3 years ago

Hi Tahir, for both these issues, your design will likely benefit from the following workarounds:

- Removing borders in Outlook
- Removing extra spacing in Outlook

In theory, align="" should work, but Outlook does have a tendency to add additional width to tables/cells. Try reducing the width of the table containing the article text (eg. 'THIS IS THE STORY HEADLINE') and see if the tables align properly then. Let us know how you go :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
mtkhan mtkhan, 3 years ago

Hi Rosanne,

Thanks for the help.

I have tried to narrow the width but still I have the issues with outlook 07,10,13. I have also tried to narrow down the particular width about more than 20px but with no success.

Similarly, media queries are not taking effect in Gmail & Yahoo App for Android. Is there a way around for this?


Here is the code link:
https://docs.google.com/document/d/1fUACvcfEl7xJGSFsOeRblWHyjkC2AQzzbD6dGT5ABKg/edit?usp=sharing


Thanks,

Tahir

Redferret, 3 years ago

Heres the problem:

<td width="220" 

you've set the table width to 624 but the first td is 220 so both your aligned tables within are getting squashed into a 220 width cell.

Also, you might find that with a loose DOCTYPE you'll see inconsistencies with clients that enforce a stricter one.

Hope that helps


Gmail app apologist
roshodgekiss roshodgekiss, 3 years ago

Hi there Tahir, Redferret's tip is ideal - see how you go with that.

Similarly, media queries are not taking effect in Gmail & Yahoo App for Android. Is there a way around for this?

These email clients don't support media queries, I'm sorry to say. You will jut have to design defensively for them. Best of luck!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098