Question

Помогите прописать в CSS  место расположение Логотипа в виде .SVG, чтобы он правильно позиционировался на сайте в Desktope и мобильной версии.

Сейчас прописано так:

HTML:
 <div class="logo1">
  <a href="/">
   <img src="https://www.aksshop.ru/logo/icon-logo.svg" class="logo1"/>
  </a>
 </div>

---

CSS:

.logo1 {
 display: flex;
 position: relative;
 margin: 14px 0px -65px 0px;
 width: 300px;
 height: auto;
 z-index: 1;
}

---

но при промотре на мобильном логотип накладывается на другие элементы.https://www.aksshop.ru/o_kompanii

Answer 1

Попробуйте что-то подобное прописать в стили:

@media screen and (min-width: 240px) and (max-width: 766px) { 
.logo1{
max-width:100%;
min-height:200px;
z-index:100;
position:relative;
top:-30px;
}}

Comments

установил,блоки переносятся, но логотип в мобильной версии прижат к левой стороне, как сделать, чтобы в мобильной версии он распологался по центру, а на десктопе оставался как есть

---

aksshop,

Попробуйте как-то так:

@media screen and (min-width: 240px) and (max-width: 766px) { .logo1{margin: 0 auto;max-width:100%;min-height:200px;}}

---

Yuri_Geruk,

Спасибо все нормально, скажите а почему на десктопе шрифт один а на мобильном другой как сделать чтобы был одинаковый шрифт.

Это на десктопе:

 

Это на мобильном:

---

aksshop,

На мобильном все хорошо, проблемы не вижу. Вы не тот скриншот предоставили.

---

Yuri_Geruk,

Странно просматриваю в разных браузерах  везде по разному

Десктоп:

мозила

браузер EDGE:

 

А это на мобильном через браузер мозила:

---

aksshop,

В данной ситуации спасет лишь свой шрифт. Прочтите http://htmlbook.ru/blog/svoi-shrift-na-stranitse и https://yraaa.ru/blogs/kak-postavit-svoj-shrift-na-sajt-ucoz

---

Yuri_Geruk,

как свой стиль шрифта правильно прописать так:

.logo1 {
 display: flex;
 position: relative;
 margin: 14px 0px -65px 0px;
 width: 350px;
 height: auto;
 z-index: 1;
}

@media screen and (min-width: 240px) and (max-width: 766px) {
.logo1{
margin: 0 auto;
max-width:100%;
font-family: Georgia;
min-height:200px;}}

 

---

aksshop,

Прочтите для начала материалы по ссылках, я же их дал чтобы вы прочитали, вы еще не прочли и уже спрашиваете как сделать. Там есть ответ на ваш вопрос, читайте.

---

Yuri_Geruk,

Я прочитал, но собственно не нашел ответа, логотип у меня стоит svg а не текстовый.

---

aksshop,

В данной ситуации с разным отображением svg я вам не помогу, так как в картинке шрифт редактировать стилями нельзя, только перерисовать файл и никак иначе.