Hi Scriptflow
I tried to copy and Paste of that in the Theme css but it doesnt work
however, I tried to put it on Custom css Code and its work… BUT. the margin on the top is too Big
How can we adjust that ??
Thank you so much
Topic summary
A Shopify store owner using the Empire 11.1.3 theme is experiencing layout issues with an Icon List section on mobile devices. On desktop, the icons display in a single horizontal line with minimal spacing between the header and banner. However, on mobile, the icons stack vertically with excessive spacing.
Solutions Proposed:
-
ProtoMan44 suggested removing margin-top from the following section using custom CSS with a media query for screens under 800px width.
-
TheScriptFlow provided CSS code to add to theme.css that uses flexbox to center and align icons horizontally on mobile, plus adjusts margin spacing. The user reported this solution worked when placed in Custom CSS, but created excessive top margin.
-
Rohail_Ali_12 proposed two alternative approaches: enabling horizontal scrolling or converting icons to a slider format, asking if the theme has built-in mobile slider options.
Current Status:
The issue remains partially unresolved. TheScriptFlow’s code achieved the horizontal layout but needs margin adjustment. The user indicated their theme likely doesn’t have the slider options mentioned.