Изменение размера логотипа и текста Мобильный телефон

Question

Я занимаюсь сайтом для своего дяди, и у меня есть небольшая проблема. Когда я нахожу его на мобильном устройстве, логотип, название сайта и панель навигации собраны вместе.

Вот как он выглядит здесь.

Как я могу изменить это в CSS? Я посмотрел на все, и я не нашел ответов. Я попытался изменить часть @media CSS на style.css

Answer 1

Вы можете попробовать сделать:

margin: 20px; 

Это должно создать зазор между логотипом и названием должно быть дальше друг от друга. Также, если бы вы могли включить какой-то код в свои сообщения, это было бы здорово.

Answer 2

Поскольку сайт в настоящее время не работает, и нет какого-либо кода, что бы так ни было, я могу по крайней мере помочь вам в применении медиа-запросов.

@media (max-width: 480px) { 
    .<yourimg>: <your styling>; 
} 

Это позволит кем бы вы ни стиль для применения на экране меньше, чем 480px в ширину. Вам, очевидно, разрешено вставить нужную вам ширину. Это лишь пример :)

Вы можете прочитать все о медиа запросов here

Надеется, что это помогло немного :)

// Марк Hjorth

Answer 3

я использую это:

<div class="col m12 s12 l8 offset-l2"> </div> 

, который устанавливает ширину div в зависимости от размера экрана, просматривающего его, что упрощает проектирование мобильного сайта без необходимости разработки двух отдельных сайтов.

, например, я бы сделал контейнер вокруг определенной области, установите его в виде строки с DIV, а затем использовать столбцы, которые изменяются в зависимости от размера экрана

<div class="sections-container"> 
<section id="our-vision" class="section"> 
    <div class="row"> 
    <a name="our-vision"></a> 
    <div class="col m12 s12 l8 offset-l2"> 

    </div> 
    </div> 
</section> 
</div> 

Answer 4

Я имел быстрый взгляд на веб-сайте. Существует проблема с пустой боковой панелью, которая толкает навигацию вниз.

Боковая панель со следующим id: id = "sidebar-header" Вы должны попытаться отключить боковую панель в своей теме, если она вам не нужна. или вы можете добавить простое правило CSS в таблицу стилей, чтобы не отображать его:

#sidebar-header { display: none; } 

для перемещения мобильного меню вы можете изменить это правило стиля в style.css на линии 2795:

@screen and (max-width: 760) { 
... 
#access { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 3; 
    width: 100%; 
    padding: 0; 
    background: none; 
    box-shadow: none; 
} 
... 
} 

Отредактируйте верхнее и левое свойства там (добавьте некоторые значения пикселей, например: top: 70px, например)

Надеюсь, это поможет.