Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Социальные группы Поиск Сообщения за день Заказать работу  
 
Рейтинг 4.68/34: Рейтинг темы: голосов - 34, средняя оценка - 4.68
0 / 0 / 0
Регистрация: 31.10.2018
Сообщений: 21
1

Логотип в мобильной версии сайта

24.02.2019, 15:53. Показов 6680. Ответов 9
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Здравствуйте. Скачал шаблон, вставил свой лого, он в мобильной версии больше ширины экрана.Как правильно в медиазапросах прописать, чтобы лого был 70% от реального размера?

HTML5
1
2
3
4
5

<div class="col-md-3"> 
          <!-- START LOGO -->
          <div class="basement-logo"> <a class=”navbar-logo href="index.html"><img src="images/logo.png" alt="Basement" ”></a> </div>
          <!-- END LOGO --> 
        </div>
CSS
1
2
3
4

.basement-logo {
  padding: 10px 0;
  
}
0
Лучшие ответы (1)
Сообщение: #13355642
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 24.02.2019, 15:53
Ответы с готовыми решениями:

Тестирование мобильной версии сайта
Делаю мобильную версию сайта, адаптивной версткой но не могу понять как на пк можно посмотреть, не...

Создание мобильной версии сайта
Подскажите как реализовать? При помощи @media handheld (screen) не получается. Добавлено через...

Шаблон мобильной версии сайта
Не подскажете где найти шаблоны для сайта заточенных под телефоны и КПК? Нужен просто шаблон на...

Меню для мобильной версии сайта
Ребят, подскажите! Как сделать меню ( выпадающее ) то что на сайте mybootstrap.ru ( в адаптивное...

9
6 / 5 / 2
Регистрация: 27.03.2013
Сообщений: 136
24.02.2019, 16:40 2
Подставьте свои значения.
HTML5
1

<div><img src="images/logo.png" alt="" class="logo"></div>
CSS
1
2
3
4
5
6
7
8
9
10

.logo {
  width: 200px;
}
 
 
@media (max-width: 500px) {
  .logo {
    width: calc(30%);
  }
}
0
0 / 0 / 0
Регистрация: 31.10.2018
Сообщений: 21
24.02.2019, 17:58  [ТС] 3
что-то все равно осталось по-прежнему...

Добавлено через 16 минут
так сделал

HTML5
1
2
3
4
5

<div class="col-md-3"> 
          <!-- START LOGO -->
          <div class="basement-logo"> <a class="logo" href="index.html"><img src="images/logo.png" alt="Basement" ”></a> </div>
          <!-- END LOGO --> 
        </div>
CSS
1
2
3
4
5

@media (max-width: 500px) {
  .logo {
    width: calc(30%);
  }
}
0
278 / 272 / 106
Регистрация: 12.01.2016
Сообщений: 1,666
24.02.2019, 18:11 4
Адильбек16, а что за шаблон, что за лого, можете показать картинку и покажите css лого
0
6 / 5 / 2
Регистрация: 27.03.2013
Сообщений: 136
24.02.2019, 18:14 5
Адильбек16, покажите логотип!
Ширина для logo img в десктопной версии задана?
0
0 / 0 / 0
Регистрация: 31.10.2018
Сообщений: 21
24.02.2019, 23:44  [ТС] 6
размер лого 366х40

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<div class="header-top-area">
    <div class="container">
      <div class="row">
        <div class="col-md-3"> 
          <!-- START LOGO -->
          <div class="basement-logo"> <a class="logo" href="index.html"><img src="images/logo.png" alt="Basement" ”></a> </div>
          <!-- END LOGO --> 
        </div>
        <div class="col-md-9"> 
          <!-- START MAIN MENU -->
          <nav class="navbar navbar-default"> 
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
              <!-- Logo --> </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li><a class="smoth-scroll" href="#home">Главная</a></li>
                <li><a class="smoth-scroll" href="#aboutus">О нас</a></li>
                <li><a class="smoth-scroll" href="#services">Услуги </a></li>
                <li><a class="smoth-scroll" href="#ourteam">Наша команда</a></li>
                <li><a class="smoth-scroll" href="#testimonial">Отзывы</a></li>
                
                <li><a class="smoth-scroll" href="#contactus">Контакты</a></li>
              </ul>
            </div>
            <!-- /.navbar-collapse --> 
          </nav>
          <!-- END MAIN MENU --> 
        </div>
      </div>
    </div>
  </div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

@media (min-width: 768px) and (max-width: 991px) {
/*** Common styles ***/
#scrool-top {
    right: 15px;
}
/*** navigation ***/
.navigation {
    padding: 0;
}
.basement-logo {
    float: left;
    
}
.navbar-toggle {
    margin-right: 0;
    margin-top: -34px;
}
.navbar-default .navbar-nav li a {
    font-size: 12px;
    padding: 23px 10px;
}
.navbar-collapse {
    margin: 6px 0 0;
}
.navigation .navbar-collapse {
    padding: 0;
}
.navbar {
    margin-top: 0px;
}
 
}
@media (max-width: 767px) {
/*** Common styles ***/ 
.section-title span {
    display: none;
}
.section-title h3 {
    margin-top: 0;
}
#scrool-top {
    right: 15px;
}
.section-title h3 {
    margin-left: 0;
}
/*** Top Bar ***/
.top-social {
    float:left !important;
    }
/*** navigation ***/
.navbar-default .navbar-toggle .icon-bar {
    background: #f8f8f8
}
.basement-logo {
  padding: 10px 0;
  
}
.navbar-logo img{
    max-width: 250px;
    margin-left: 15px;
    max-height: 50px; 
    }
.menu-bg .navbar-toggle .icon-bar {
    background: #fff
}
.menu-bg .navbar-toggle {
    background: #ffb400;
    margin-top: -48px;
}
.navbar-toggle {
    margin-right: 0;
    margin-top: -48px;
    border: none;
    background: #ffb400;
}
.menu-bg .navbar-collapse, .navbar-collapse {
    background: none;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background: #ffb400;
}
.navbar-default .navbar-nav li a, .menu-bg .navbar-default .navbar-nav li a {
    padding: 11px 15px;
}
.menu-bg .basement-logo {
    padding: 10px 0;
}
header .navbar-nav {
    margin: 7.5px 0;
}
.navbar {
    margin: 0;
}
.navbar-brand {
    display: block;
    padding: 0;
    height: auto;
}
.navbar-default .navbar-collapse {
    float: none;
    border: none;
    box-shadow: none;
}
 
@media (max-width: 500px) {
  .logo {
    width: calc(30%);
  }
0
6 / 5 / 2
Регистрация: 27.03.2013
Сообщений: 136
25.02.2019, 11:54 7
Лучший ответ Сообщение было отмечено Адильбек16 как решение

Решение

Адильбек16,
нужно задать ширину изображения в коде, из чего-то же 30% нужно высчитать!
CSS
1
2
3
4
5
6
7
8
9
10

.logo img {
  width: 366px;
}
 
 
@media (max-width: 500px) {
  .logo img{
    width: calc(30%);
  }
}
1
469 / 334 / 144
Регистрация: 16.02.2018
Сообщений: 930
25.02.2019, 12:01 8
Адильбек16,

CSS
1
2
3

. logo img{
max-width: 100%;
}
1
0 / 0 / 0
Регистрация: 31.10.2018
Сообщений: 21
25.02.2019, 23:00  [ТС] 9
Спасибо большое, помогло.

Добавлено через 1 час 36 минут
Подскажите зависимость, я как уменьшил логотип в мобильной версии, рядом стоящая иконка меню была по центру, стала прижата к верху. где копать? извините,что так на словах объясняю. зависимость эту понять не могу

Добавлено через 2 минуты
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<div class="header-top-area">
    <div class="container">
      <div class="row">
        <div class="col-md-3"> 
          <!-- START LOGO -->
          <div class="basement-logo"> <a class="logo" href="index.html"><img src="images/logo.png" alt="Basement" ”></a> </div>
          <!-- END LOGO --> 
        </div>
        <div class="col-md-9"> 
          <!-- START MAIN MENU -->
          <nav class="navbar navbar-default"> 
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
              <!-- Logo --> </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li><a class="smoth-scroll" href="#home">Главная</a></li>
                <li><a class="smoth-scroll" href="#aboutus">О нас</a></li>
                
                <li><a class="smoth-scroll" href="#ourteam">Наша команда</a></li>
                
                
                <li><a class="smoth-scroll" href="#contactus">Контакты</a></li>
              </ul>
            </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

.navbar-default .navbar-toggle .icon-bar {
    background: #f8f8f8
}
.basement-logo {
  padding: 10px 0;
  
}
.navbar-logo img{
    max-width: 250px;
    margin-left: 15px;
    max-height: 50px; 
    }
.menu-bg .navbar-toggle .icon-bar {
    background: #fff
}
.menu-bg .navbar-toggle {
    background: #ffb400;
    margin-top: -48px;
}
.navbar-toggle {
    margin-right: 0;
    margin-top: -48px;
    border: none;
    background: #ffb400;
}
.menu-bg .navbar-collapse, .navbar-collapse {
    background: none;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background: #ffb400;
}
.navbar-default .navbar-nav li a, .menu-bg .navbar-default .navbar-nav li a {
    padding: 11px 15px;
}
.menu-bg .basement-logo {
    padding: 10px 0;
}
header .navbar-nav {
    margin: 7.5px 0;
}
.navbar {
    margin: 0;
}
.navbar-brand {
    display: block;
    padding: 0;
    height: auto;
}
.navbar-default .navbar-collapse {
    float: none;
    border: none;
    box-shadow: none;
}
 
@media (max-width: 500px) {
.basement-logo img{
    width: calc(80%);
  }
}
0
6 / 5 / 2
Регистрация: 27.03.2013
Сообщений: 136
26.02.2019, 11:51 10
Адильбек16, тот код что Вы скинули, там ничего не понятно, нужно визуально посмотреть на сам сайт
0
26.02.2019, 11:51
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 26.02.2019, 11:51
Помогаю со студенческими работами здесь

Отступ справа на мобильной версии сайта
https://ruflex.000webhostapp.com/main2/ заметил на своем сайте отступ справа именно на мобильной...

Оптимизация блока в мобильной версии сайта
Доброго времени суток! Подскажите что я именно сделал не так. На мобильной версии сайта не...

Не работают ссылки в мобильной версии сайта
http://байкал-логистика.рф - имеется сайтик, делался давно, пришла инфа, что не работают ссылки с...

Белая полоса в мобильной версии сайта
В мобильной версии сайта при прокрутке вниз появляется белая полоска, равная по высоте верхней...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru