Button Alignment in Image Banner Section for Mobile Only

Shopify Discussion
,
1

Hi Shopify Community,

I’m facing an issue with the button alignment in the image banner section on mobile devices. The button appears perfectly aligned on desktop, but on mobile, it’s either misaligned or too close to the edges.

dately_0-1726679725140.png
dately_0-1726679725140.png433×601 133 KB

2

Hey @dately

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

Hi. My store url is eatdately.com

4

The live site looks fine on Iphone SE and Samsung s20.

If anything the middle block is missing about 2px of margin on the bottom of the button to match the other buttons.

I think what would also look cool is having these blocks stacked on mobile opposed to the same layout as desktop. A few reasons I make this suggestion even though I know it will be a headache to have to do this over but I do think it would be useful…

  1. Accessibility, having the font larger will make it easier for people to read. This would be possible with the stacked format.

  2. SEO- You actually have a good looking product (people need to find it) Google uses words on your page as keywords to match with user search queries. With using just images you are missing out on organic traffic.

I think maybe the images are used simply to make sure you have the right asthenic. This is still totally possible by injecting fonts and changing the background colors. That looks like the Nominee Heavy font - would be pretty easy to download and include in your theme files. Anyways, just a thought. The site looks great!