Responsive template using RSS feed

I've build a template that is using an RSS feed to populate it's content.
Everything works fine on general email clients, but when I look at it on a smartphone the rss images are not resizing . When I test it with regular images it works like a charm.

My code (in the template):
<rssimage width="274" class="hard_small_resize" />

Css code:
@media only screen and (max-device-width: 480px) {
.hard_small_resize{width: 214px !important; height: auto !important;}
}

It should have width of 214px, but it's not working at all.

Any help is welcome.

roshodgekiss roshodgekiss, 3 years ago

Hi there, lavagraphics! Mind me asking, what model smartphone are you using? Sadly, not all support media queries.

Another thing - you may want to try @media only screen and (max-width: 480px) { - this also has better support than max-device-width.

Thanks, lavagraphics - let us know how you go here :)


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

Hi roshodgekiss it runs all Media Queries like it should.

The css works with regular images instead of RSS images, but I do want to use the RSS images.

I tried your suggestion but that didn't work out.
I'm testing on an iPhone 4S btw.


Act Smart & Look Great
roshodgekiss roshodgekiss, 3 years ago

Hi lavagraphics, that's really curious. Would it be possible for you to get in touch with our team, with client and campaign details? We'd love to replicate this on our end and suggest a fix, where possible. There's a chance that some CSS may be getting pulled in with the RSS images, but it's hard to say without testing things out here.

Thanks, lavagraphics - fingers crossed!


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

Hi Ros,

Was the team able to address this issue? I'm having the exact same problem as lavagraphics.

Thanks,
Juan


@juanrojodesign
Email design
Campaign Monitor coding
Helping small and mid-size businesses maximize their marketing budgets.
juanrojodesign juanrojodesign, 3 years ago

Got in touch with support and they were able to provide a workaround. Apply the class to the container <td> instead of the image <img>. At the moment, classes cannot be applied to the <rssimage /> tag. The code goes something like this:

HTML:
<td valign="top" class="resizeimage">
<rssimage width="560"></rssimage>
</td>

CSS:
@media only screen and (max-width: 600px){

.resizeimage img{
height:auto !important;
max-width:560px !important;
width:100% !important;
}
}


@juanrojodesign
Email design
Campaign Monitor coding
Helping small and mid-size businesses maximize their marketing budgets.
juanrojodesign juanrojodesign, 3 years ago

I should have mentioned that this solution was provided based on my own code, you might need to tweak your container and or media query depending on the size of the image that you want to display.

Juan


@juanrojodesign
Email design
Campaign Monitor coding
Helping small and mid-size businesses maximize their marketing budgets.
roshodgekiss roshodgekiss, 3 years ago

Thanks, Juan - great to know that things worked out in the end :)


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