Hi,
My background is limited to the new design drag and drop editor for Hubspot email creation. At the moment this is my preferred method over templates in the marketplace as I can easily change background colours etc. However…
I (and many others) I have seen in this forum have raised the issue of disliking the fact that that layout of two pictures or three pictures side by side on desktop appear in a stacked format on mobile. I understand that this is unavoidable feature of the new drag and drop editor and happens because the the drag and drop editor is responsive.
It is my (somewhat) naive understanding, that if I knew anything more advanced we could find a way round this. However, as I don’t know how to code or anything, I was wondering…are there any templates in the marketplace that anyone knows of that will get around this stacking issue and enable two or three images to appear side by side on mobile? If so what is the name of it? This magical template would be lovely! 
Hey @Nopti123
So I’ve come up with a pretty simple work around.
Step 1:
Arrange your images in the drag and drop template editor.
You can use 2, 3, or 4 images in a row.
Step 2:
Select your image modules.
In the editor panel give them the CSS Class “inline-mobile”
Step 3:
Navigate to the “Additional <head> markup” section in your editor panel.
Paste in the following CSS
<style>
@media (max-width: 767px) {
.row-fluid .span6.inline-mobile {
display: inline!important;
float: left!important;
width: calc(50% - 2.5%)!important;
margin-left: 5%;
}
.row-fluid .span4.inline-mobile {
display: inline!important;
float: left!important;
width: calc(33.33% - 3.33%)!important;
margin-left: 5%;
}
.row-fluid .span3.inline-mobile {
display: inline!important;
float: left!important;
width: calc(25% - 3.75%)!important;
margin-left: 5%;
}
.row-fluid .inline-mobile:first-child {
margin-left: 0;
}
.inline-mobile img {
width: 100%!important;
}
}
</style>
Step 4:
Publish and test your template.
This should get you on the right track, about 90% of the way there! I can also explain this in any level of detail you would require, if needed.
Let me know if this workd for you?
Hi, this is just what I am after I think but I am super novice when it comes to code and I am struggling to follow your instructions. I have created my email in the drag and drop editor but can’t locate the relevant section for the “editor panel” to input the custom code parts. Apologies if this is super basic but can you maybe point me in the right direction or a quick screen recording? Having this implemented would really helo the look of my emails! Thank you.
