遇到移动与桌面样式问题

Question

我想在文本的右侧包含我的每个投资组合页面的徽标。我能够使用内联HTML在桌面上完成此操作以使其正确浮动：

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

这就是它在移动设备上的样子：

我如何才能获得它，以便徽标位于手机标题的顶部，这样它们就不会在一起？

我认为我将不得不进入CSS，但我一直在处理我的

中的不同命令

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

并无法弄清楚如何做到正确。

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

Answer 1

使用媒体查询调整您的浮动属性。

.widget img {
    height: auto
}

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

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