Resizing, responsive website design and scaling for mobile & desktop

Technical Q&A

Topic summary

Issue: A site that looks fine on desktop becomes cramped on mobile, with elements (including a countdown timer) stacking and spacing incorrectly. The author asks if items can auto-scale or if separate code is needed.

Suggested approach: Use CSS media queries to adjust styles based on viewport width (e.g., spacing, layout) so the design becomes responsive.

Clarifications requested: The author asks where to place the CSS (e.g., in a Shopify-like theme structure under Layout > theme.liquid, possibly before ) and provides an example media query targeting min-width: 768px that changes margin-left for a class.

Key concept: CSS media queries are conditional styling rules that apply only at specified screen sizes, enabling different spacing, sizing, and layout on mobile vs. desktop.

Open items: No definitive answer on the correct placement of the CSS in the theme or specific rules for the countdown component. Later posts ask whether a solution was found.

Status: Unresolved; implementation details and final fix not confirmed.

Summarized with AI on December 23. AI used: gpt-5.
1

Hello,

I’m trying to scale my website from Desktop view to Mobile view and have added a countdown timer via the HTML code.

My problem is that the website does not scale correctly for mobile, it looks great on desktop but could do with some changes to sizing and spacing but when loaded on desktop it is all bunch together ontop of one another. How do I make items like the countdown scale automatically? Is this even possible or is it another set of code to be written?

I have a very basic understanding on HTML but nothing complex at all.

Website: www.twentynineleven.co.uk

Please could anyone help??

Thanks in advance!

2

Use CSS media queries to change the styling for mobile.

1 Like
3

Thank you very much. Would you mind helping me/telling me where to insert this?

Am I to insert this across all themes?

Layout > theme.liquid > in here before the final ' ??

Would this be the correct code?

<style>
@media screen and (min-width: 768px) {
     .your_class{ margin-left: 40px !important; }
}
</style>

Thanks in advance!

4

Did you find an answer to this?

1 Like
5

Answer?