我想要一行文本，但在移动设备上需要两行

Question

所以我想在一行中显示特定文本 'Designed by...' 除了移动设备等较小的设备。我希望这个特定的文本位于第二行。

这是当前代码：

<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>

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

我希望有人能帮助我 :) 谢谢！

Answer 1

我在 div 中添加了 span，并且我使用 css 在手机尺寸中设置样式

@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>

让我知道这是否适合你:)

我想要一行文本，但在移动设备上需要两行

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

html

css

devise

shopify

media-queries