How to make "Image with Text" button's smaller and parallel in Mobile

New Member
2 0 1



I am having trouble trying to configure the themes.scss.liquid file to target the "Image with Text" buttons. I would like them to be side by side each other in mobile view. See screenshot below of how I currently have them vs how I want them. Any help would be appreciated!MobileView.PNG

1 Like
Shopify Expert
3470 543 819

Hi @doughtyb 

Send me your store URL so i can check.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
New Member
2 0 1


Hello, @doughtyb!


That's a great question. Changing the CSS for mobile would require adding a media query into your theme's CSS file that targets screen sizes that are mobile width.


If you're interested in creating mobile-friendly page content without needing to code, our app Shogun Page Builder lets you design content for all screen sizes. All of the elements in Shogun are responsive by default, which means they'll naturally scale to fit any device. Our Columns element also has options that let you control how the content is arranged on mobile.


Here's an example of how those side-by-side buttons can be quickly recreated in the Shogun editor:



In addition to responsive content, we have a Screen Settings feature that makes it possible to display alternative designs specifically for mobile, tablet, laptop, and widescreen.


If you're interested in testing our app, we have a 10-day free trial. You can uninstall at any time.


Our support team is also available 24/7 to provide assistance. Please feel free to reach out with any additional questions. :)

Jill Nahajewski | Head of Client Support, Shogun | | Try Shogun Page Builder for Shopify for FREE!