Слоган добавлен в Squarespace OM смещает положение при разной ширине экрана

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 текстового блока будет внутри тега

. Но я думаю, что вы не можете изменить структуру HTML в Squarespace, не так ли? Если нет, то единственное решение, которое я мог бы придумать, - это Javascript.

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

Затем вы можете легко позиционировать / стилизовать ваш новый элемент с помощью CSS, и он всегда будет оставаться рядом с логотипом.

1

Источник Поделиться

user3177115 29 янв '18 в 08:24 2018-01-29 08:24

2018-01-29 08:24

Answer 2

Я понял, что одним из способов избежать добавления простого слогана непосредственно под логотипом / навигацией в Squarespace OM было удаление изображения заголовка шаблона (изображение заголовка находится прямо под логотипом / навигацией) и добавление нового изображения в основной файл. область содержимого с использованием блока изображения, с блоком уценки над ним, который содержит отформатированный слоган. Затем мне просто нужно было удалить лишний пробел над блоком уценки, используя несколько пользовательских CSS. Уменьшение отступа на #page сделало трюк, чтобы уменьшить лишние пробелы:

#page {margin-top:13px}