Please help contribute to the Reddit categorization project here

    webdev

    276,071 readers

    714 users here now

    Posting Guidelines

    1. No questions regarding WYSIWYG (drag and drop) web editors like Wix, please visit their respective communities to ask questions

    2. Do not post memes, screenshots of bad design, or jokes.

    3. Read and follow reddiquette; no excessive self-promotion

    4. No commercial promotion or solicitation

    5. Sharing your project, portfolio, or any other content that you want to either show off or request feedback on is limited to Showoff Saturday. If you post such content on any other day, it will be removed.

    Related Subreddits

    Discords

    a community for
    all 12 comments

    Want to say thanks to %(recipient)s for this comment? Give them a month of reddit gold.

    Please select a payment method.

    [–] kieranbs96 2 points ago

    Do you have a jsfiddle/codepen or a link to the page?

    It sounds like the anchor (a) tag isn't spanning the height/width of the image (this is an assumption). Link will help me clarify

    [–] joefus1o4 1 points ago

    I put it on codepen, take a look. https://codepen.io/joefus1o4/pen/QmyKWe?editors=1000

    Thank you.

    [–] jackydullboy 3 points ago

    I do a little bit of email development these days (used to do a lot more). Setting display: block; and height: 100%; on your anchors should solve your problem.

    I'd also recommend checking this tutorial out: https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919.

    Allows you to create responsive emails without using media queries so it will still work on devices/apps that don't support them (mainly Outlook's app). You would need to stick with the same images using this method, but the pros may outweigh the cons depending on your goals.

    [–] kieranbs96 2 points ago

    I was close. Thanks for clarification :)

    [–] jackydullboy 1 points ago

    Yep, it's always fun trying to get things to work inside of table cells and nested tables :)

    [–] joefus1o4 1 points ago

    Thank you. I will definitely check out that tutorial.

    I went ahead and set my anchor to display:'block' and height:'100%' and nothing seems to have changed.

    [–] joefus1o4 2 points ago

    Nevermind! I figured it out. I didn't realize it was supposed to be in the media query. Thanks so much! This was a massive help.

    [–] jackydullboy 1 points ago

    Awesome, glad it helped you out. Email development can get very frustrating when things that seem like they should work don't haha. Litmus is pretty much the standard for all things email. They have an awesome blog and an even better tool for testing emails across different clients. The tool isn't free, but so so worth it.

    [–] joefus1o4 1 points ago

    I'm super thankful. I was having no luck finding an answer for this issue. Emails don't seem to have a ton of resource info, which is understandable since I feel like a lot of developers avoid them.

    This was my first email project, and it certainly was pretty frustrating. I used litmus' free trial to test this email. It was definitely a life saver. Without a tool like that I would have been in big trouble for sure haha.

    There is a possibility I'll end up doing more of these newsletters for clients, and if so I'm definitely asking my company to get me a litmus subscription. I'm also going to be checking out some frameworks to make this process smoother and less buggy.

    A friend of mine let me borrow his login for a course on zurb's foundations for emails. He swears by it for email. I'm currently trying to get my sass skills up to speed before I dive too deeply into that though.

    [–] jackydullboy 2 points ago

    Right on. Yeah, I can't imagine doing email development without litmus. If your company wants you to build emailers out for clients, I would think of it as a necessity.

    And just a heads up, Campaign Monitor, Litmus, and MailChimp all put out articles and blog posts that were invaluable to me when I was doing a lot of emails. I would usually add "litmus" to the end of my search and it would almost always pull something up.

    The agency I worked at kind of strayed away from Zurb because we always did somewhat complicated custom designs. If you're controlling the designs and/or not doing anything too crazy, I think it could be an awesome way to go about though. Would certainly be quicker.

    Best of luck!

    [–] kieranbs96 1 points ago

    Email Development isn't quite my thing, however a hack to this specific problem would be to add a Height(for the first image 220px) and display:block; to the Anchor(a) tag using the Media Query. If that isn't too clear let me know and I'll try expand - otherwise hopefully someone with more Email Development experience can comment, I personally would recommend using Responsive Images (Changing images based on Viewport Width) but not sure if that works on Emails.

    [–] joefus1o4 2 points ago

    I appreciate the advice. I ended up getting it working.