html - 遇到移动与桌面样式的问题

Question

我想在文本的右侧包含我的每个投资组合页面的 Logo 。我能够在桌面上使用内联 HTML 使其正确 float 来完成此操作:

<p><a href="link" style="padding: 0 0px; float: right;" src="img" alt="" 
width="200" height="200" /></a></p>
<h4><strong>Amazin' Aces Pickleball</strong></h4>

这是链接:http://matzniewski.com/my-work/amazin-aces/

这是它在手机上的样子:

我怎样才能让 Logo 位于移动设备上标题的顶部，这样它们就不会挤在一起？

我想我将不得不进入 CSS 但我一直在我的

中摆弄不同的命令

@media only screen and (max-width: 480px) {

不知道如何正确处理。

如果相关的话，我正在使用 Wordpress 和 SiteOrigin。

Answer 1

使用媒体查询来调整您的 float 属性。

.widget img {
    height: auto
}

@media screen and (min-width:831px) {
    .widget img {
        float: right;
     }
}

@media screen and (max-width:830px) {
        .widget img {
            float: none;
     }
}