css - 向Squarespace OM添加的标语在不同的屏幕宽度上移动位置

我需要在Squarespace OM的徽标下创建一个标语，并且无法在此处创建文本块，因此我在页面下部创建了一个文本块，并使用CSS将其放置在页面顶部附近。但是，即使我使用CSS，我也认为标语只能在1816宽度的屏幕尺寸及以上的尺寸上保持不变，我认为可以将徽标下的标语保持为非移动屏幕尺寸。在其他屏幕尺寸上，标语出现在徽标/导航上方。 （以移动电话大小，标语可以消失。）该站点位于：https://shara-karasic-rkbg.squarespace.com/

在平板电脑和台式机尺寸的情况下，如何确保标语保持在徽标下方的固定位置？

我使用的CSS是：

     @media only screen and (min-width: 1024px) {
       /* Add your custom styles here for Desktop */
         #block-yui_3_17_2_2_1516902907408_4620{color:
    #5b01a6;position: relative;padding: 0 0 0 5;bottom:2300px;}
     }
 @media only screen and (max-width: 1023px) {
   /* Add your custom styles here for Tablet */
     #block-yui_3_17_2_2_1516902907408_4620{color:
#5b01a6;position: relative;padding: 0 0 0 5;bottom:2300px;}
 }

谢谢！

最佳答案

文本块html的正确位置应位于

标记内。但是我认为您无法在Squarespace中更改html结构，对吗？如果没有，我唯一想到的解决方案就是Javascript。

$(document).ready(function() {
    $("#lower-logo").append('<p class="tagline">Merging mind-body...</p>');
});

然后，您可以轻松地使用CSS定位/设置新元素的样式，并将其始终留在徽标旁边。