I want text in one line but on mobile in 2 lines

Question

So I would like to display a specific text 'Designed by...' in one line besides smaller devices like mobile. There I want this specific text to be in a second line.

Here's the current code:

<div class="Footer__Copyright">
<a href="{{ shop.url }}" class="Footer__StoreName Heading u-h7 Link Link--secondary">Copyright © {{ shop.name }}</a>  

<div class="text">Designed by <a href="https://www.example.com/">EXAMPLE.</a>
</div>
</div>

Image 1. Mobile (how it should stay) Image 2. Everything above mobile should be in one line

I hope someone can help me with that :) Thanks!

Answer 1

I add span instead in div and I used css to style it in the mobiles sizes

@media only screen and (max-width: 600px) {
.span{display: inline;}
}

<div class="Footer__Copyright">
<a href="{{ shop.url }}" class="Footer__StoreName Heading u-h7 Link Link--secondary">Copyright © {{ shop.name }}</a>  

<span class="text">Designed by <a href="https://www.example.com/">EXAMPLE.</a>
</div>
</div>

Let me know if this works for you :)