Mobile Email Columns

[amberleemaya]

Hi everyone! I was hoping someone has come across a way to make the columns from the drag and drop editor show as columns in the mobile version of the email as well. 

I am trying to add 4 links to the bottom of my emails. Facebook, Instagram, Locations and Website. You can see the 4 columns in the desktop preview show up correctly, but in the mobile version they stack ontop of each other. 

Has anyone found a way to make the mobile version columns show next to each other instead of stacking? (I would like to see all 4 on the same row - or a minimum of 2 on each row. It looks funny the way it is now)

Thank you for your help!

[amberleemaya]

FOLLOW UP: I did some more research and playing around with the CSS and I think I figured it out. It may not be "pretty" CSS but it seems to work. (If you have any recommendations to improve it I would love to hear!) But I wanted to share in case is helps anyone else.

CODE IN HTML MODULE:
Note: I found out I couldn't have the widths equal 100% - or the last div pushed to the next line. That's why I did 24% each.

<div style="text-align:center">
<div style="display: inline-block; margin: 0px 0px 0px 0px; width:24%; text-align: center"><a href="LINK"><img src="IMAGELINK" alt="TEXT" style="width:50px; height:50px;"></a></div>
<div style="display: inline-block; margin: 0px 0px 0px 0px; width:24%; text-align: center"><a href="LINK"><img src="IMAGELINK" alt="TEXT" style="width:50px; height:50px;"></a></div>
<div style="display: inline-block; margin: 0px 0px 0px 0px; width:24%; text-align: center;"><a href="LINK"><img src="IMAGELINK" alt="TEXT" style="width:50px; height:50px;"></a></div>
<div style="display: inline-block; margin: 0px 0px 0px 0px; width:24%; text-align: center"><a href="LINK"><img src="IMAGELINK" alt="TEXT" style="width:50px; height:50px;"></a></div>
</div>

Here is what it looks like: (showing the custom HTML module vs the default social module)

DESKTOP: 

MOBILE:

[GeorgeBThomas]

Looks like the default social module might be the way to g! But, either of them look way better than the previous option you first shred. 🐱‍🏍

[GeorgeBThomas · Accepted solution]

@amberleemaya,

My first question was, why are you not using the default social module in the email drag & drop tool? But, then, I saw that two of these are not like the other. 😁

So, here is a suggestion that may get you through.

I would add those images in a rich text (or HTML module) if you have downloaded the free module in one row. You can get each image to align in whatever way you want and use inline CSS to get the desired look. As well as link each image as normal. Because in one row and images, it should just shrink in size by default.

If you are not great with code, you could use a site like this to create a needed table. https://divtable.com/generator/

The code would look something like this:

<table>
<tbody>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>

Or, you could get nerdy with <div> vs <table> as well.

You could then replace the (&nbsp;) with a link to your image.

<a href="your Social URL Here"><img src="link to hubspot file manager of image here" alt="HTML tutorial" style="width:42px;height:42px;"></a>

Then you could use some CSS in line styles to tweak as needed.

Or, you could reach out to an agency and see if they could build you a custom module you could reuse over and over again. 👍

Please let me know if you have any questions.

[amberleemaya]

Thank you George! Funny thing is I forgot all about the default social module as it has been a year since I created a template. Looks like they do have an option for custom icons - so I may be able to get by with that until I can figure out the custom HTML module. 

Desktop:

Mobile: 

I started messing with the HTML module and was able to use div tags to pull in my icons, create the links, etc. The part I am not too savvy with is how to make them show up next to each other. I see a lot with the float option - but I am not well-versed in CSS so I don't know how to add that to the div tags without having the <style> coding in the "header." I don't want to lose the drag and drop ability in the template - so I am not sure how to proceed with that.

As I said, the default social module will get me by and is "good enough" - just not perfect because I can't make the icons quite as big as I wanted on the desktop version due to limitations in the module itself. There are also other elements of my email that this solution would be helpful with - so if you have any insight on the float part - I would be so grateful. 

Thank you for your time and help!