Hi community,
I’m a big fan of the Hustle (acquired by Hubspot). On their newsletter they have a great feedback feature - 3 image next to each other that lead to 3 different google form for feedback
I tried to do a similar thing using the 3 layouts and adding an image on each box
It looks ok on laptop view but terrible on Cellphone. Any suggestion how to do it differently ?
laptop view
Cellphone
thanks
Nicolas
Hi Nicolas. Great idea in collecting user feedback like this. In this case I would try using a one column layout and adding your image links in that one column. This way they will stay centered on mobile. The width of the three images isn’t wider than 500px so you should be good there.
On the example I showed each emoji brings to a different google form. With 1 column the image has to a block correct? In this case I can only have 1 link right?
Try dragging an image module into the empty column. Then do it two more times dropping the image next to the previous image. Below is a screenshot.
That’s what I did. Do you know How I can make sure the image stay next to each other when viewed on cellphone?
Oh I see now. When you add the image module it converts the 1 column layout to 3 automatically. I tried rich text to add images there but that isn’t supported. Do you by chance have the HTML module that used to be available in the marketplace? If you don’t have it and need it, you can direct message me and I could help you get it in your account.
I was able to use that to get the effect you need using this custom code.
<p style="text-align:center"><a href="#"><img src="https://dummyimage.com/50x50/000/fff.jpg" alt="icon" /></a> <a href="#"><img src="https://dummyimage.com/50x50/000/fff.jpg" alt="icon" /></a> <a href="#"><img src="https://dummyimage.com/50x50/000/fff.jpg" alt="icon" /></a></p>
Youhou! You made my day! thank you 
Did you check the padding for each emoji? Make sure that the left and right padding are the same. I also made sure that the emojis were centered.