Resizing, responsive website design and scaling for mobile & desktop

Technical Q&A
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?