Skip to main content
Question
info
Justin Kelsey
Asked a question 3 years ago

Has anyone experienced a bug with the spacing and font formatting within mobile emails with a contained header image? My header/text displays totally fine within the draft and the desktop email, but there's a massive space within the mobile email after the header image. Currently using the ConvertKit template for this, with the header optimized to 'Contain.' Also, the font in the mobile email does not match the template font.

💡Make the most of your Community Member profile 

Share more about yourself! Click on your gravatar> profile > edit profile 

  • About You tab:
    • Photo: upload a picture of yourself or your brand
    • About You: let other community members know a little about you as a person, a creator, and anything else you'd like to add
    • Banner: add an image of your creator brand, logo, or an image that inspires your creativity
  • Social Media tab:
    • Let other members know where they can find you and your brand across social media platforms. This is a great additional step to connect with other creators in the industry!

Hey @info76! We don't recommend adding a single header image directly to that slot in the Card template, as it will cause this to happen on mobile when it's set to 'Contain' (i.e. the image will take up the full width of that area, but will not stretch its height — so if the container ends up longer than the image, it will just leave white space below it, as you can see in your screenshot.)

We also have a video demo of the Card template here173 that should help clarify further :) In this case, I'd probably suggest trying a different template and add that header image as its own image block, instead of using the one built into the Card template. Alternatively, isolate the logo from the background and upload the background image into that Card template header (set to 'Cover' rather than 'Contain'), and then add your separate logo file as its own image block on top (this method is also demonstrated in the video link provided, if it helps to see a visual example!).