Question

我需要在Squarespace OM的徽标下创建一个标语，我不能在那里创建一个文本块，所以我在页面上创建了一个标题，并使用CSS将它定位在页面顶部附近。但是，标语仅保留在1816宽度屏幕尺寸及以上，即使我使用的CSS我认为可以在非移动屏幕尺寸下将标语保持在徽标下。在其他屏幕尺寸上，标语出现在徽标/导航上方。（在移动设备尺寸下，标语可能会消失。）网站位于：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;}
 }

谢谢！

Answer 1

你的文本块html的正确位置将在＆lt; div id =＆＃34; lower-logo＆＃34;＆gt;内。标签。但我认为你无法改变Squarespace中的html结构，是吗？如果没有，我能想到的唯一解决方案是Javascript。

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

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

Answer 2

我意识到无法在Squarespace OM中直接在徽标/导航下方添加标语的方法是删除模板的标题图像（标题图像位于徽标/导航下方）而是添加新图像使用图像块到主内容区域，其上方有一个包含格式化标语的标记栏。然后我只需要使用一些自定义css删除markdown块上方的一些额外空间。减少#page上的margin-top确实可以收紧额外的空白：

#page {margin-top:13px}

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

2 个答案: