wmaraci reklam

Bilgisayar ve mobil uyumsuzluğu

6 Mesajlar 1.616 Okunma
wmaraci reklam

RecepCakmakci RecepCakmakci WM Aracı Kullanıcı
  • Üyelik 07.07.2019
  • Yaş/Cinsiyet 32 / E
  • Meslek Muhasebeci
  • Konum Düzce
  • Ad Soyad R** Ç**
  • Mesajlar 168
  • Beğeniler 38 / 13
  • Ticaret 0, (%0)



Responsive tema üzerinde bir web site yaptım fakat kırmızı daire içerisine aldığım menü toogle düğme mobilde görünmüyor (Huawei P20 Lite).
Problemi yakalamaya çalıştım fakat bilgim yetersiz kaldı.
SİTE ADI: www.ozgurevim.com


/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Nav Menu Essentials */
.nav-menu,
.nav-menu * {
margin: 0;
padding: 0;
list-style: none;
}

.nav-menu ul {
position: absolute;
display: none;
top: 100%;
left: 0;
z-index: 99;
}

.nav-menu li {
position: relative;
white-space: nowrap;
}

.nav-menu > li {
float: left;
}

.nav-menu li:hover > ul,
.nav-menu li.sfHover > ul {
display: block;
}

.nav-menu ul ul {
top: 0;
left: 100%;
}

.nav-menu ul li {
min-width: 180px;
}

/* Nav Menu Arrows */
.sf-arrows .sf-with-ul {
padding-right: 30px;
}

.sf-arrows .sf-with-ul:after {
content: "\f107";
position: absolute;
right: 15px;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
}

.sf-arrows ul .sf-with-ul:after {
content: "\f105";
}

/* Nav Meu Container */
#nav-menu-container {
float: right;
margin: 0;
}

@media (max-width: 768px) {
#nav-menu-container {
display: none;
}
}

/* Nav Meu Styling */
.nav-menu a {
padding: 0 8px 10px 8px;
text-decoration: none;
display: inline-block;
color: #fff;
font-family: "Poppins", sans-serif;
font-weight: 400;
text-transform: uppercase;
font-size: 14px;
outline: none;
}

.nav-menu > li {
margin-left: 10px;
}

.nav-menu > li > a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #00B1CA;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}

.nav-menu a:hover:before,
.nav-menu li:hover > a:before,
.nav-menu .menu-active > a:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}

.nav-menu ul {
margin: 4px 0 0 0;
border: 1px solid #e7e7e7;
}

.nav-menu ul li {
background: #fff;
}

.nav-menu ul li:first-child {
border-top: 0;
}

.nav-menu ul li a {
padding: 10px;
color: #333;
transition: 0.3s;
display: block;
font-size: 13px;
text-transform: none;
}

.nav-menu ul li a:hover {
background: #00B1CA;
color: #fff;
}

.nav-menu ul ul {
margin: 0;
}

/* Mobile Nav Toggle */
#mobile-nav-toggle {
position: fixed;
right: 0;
top: 0;
z-index: 999;
margin: 20px 20px 0 0;
border: 0;
background: none;
font-size: 24px;
display: none;
transition: all 0.4s;
outline: none;
cursor: pointer;
}

#mobile-nav-toggle i {
color: #fff;
}

@media (max-width: 768px) {
#mobile-nav-toggle {
display: inline;
}
}

/* Mobile Nav Styling */
#mobile-nav {
position: fixed;
top: 0;
padding-top: 18px;
bottom: 0;
z-index: 998;
background: rgba(52, 59, 64, 0.9);
left: -260px;
width: 260px;
overflow-y: auto;
transition: 0.4s;
}

#mobile-nav ul {
padding: 0;
margin: 0;
list-style: none;
}

#mobile-nav ul li {
position: relative;
}

#mobile-nav ul li a {
color: #fff;
font-size: 16px;
overflow: hidden;
padding: 10px 22px 10px 15px;
position: relative;
text-decoration: none;
width: 100%;
display: block;
outline: none;
}

#mobile-nav ul li a:hover {
color: #fff;
}

#mobile-nav ul li li {
padding-left: 30px;
}

#mobile-nav ul .menu-has-children i {
position: absolute;
right: 0;
z-index: 99;
padding: 15px;
cursor: pointer;
color: #fff;
}

#mobile-nav ul .menu-has-children i.fa-chevron-up {
color: #00B1CA;
}

#mobile-nav ul .menu-item-active {
color: #00B1CA;
}

#mobile-body-overly {
width: 100%;
height: 100%;
z-index: 997;
top: 0;
left: 0;
position: fixed;
background: rgba(52, 59, 64, 0.9);
display: none;
}

/* Mobile Nav body classes */
body.mobile-nav-active {
overflow: hidden;
}

body.mobile-nav-active #mobile-nav {
left: 0;
}

body.mobile-nav-active #mobile-nav-toggle {
color: #fff;
}
 

 

SMM Panel, Sosyalyuvam, Bayilik Paneli, En Uygun Panel, Takipçi Paneli
reklam

0ebedi 0ebedi Kimlik Onayı Bekliyor Banlı Kullanıcı
  • Üyelik 17.08.2018
  • Yaş/Cinsiyet 27 / E
  • Meslek Öğrenci
  • Konum İstanbul Anadolu
  • Ad Soyad E** E**
  • Mesajlar 188
  • Beğeniler 49 / 44
  • Ticaret 0, (%0)
Şöyle bir sıkıntı var ;

sizin css de belirlemiş olduğunuz mobil için max-width:768 değeri Huawei P20 Lite için düşük kalıyor

Huawei p20 Lite çözünürlüğü ==> 1080x2280

eğer css dosyanızdaki şu değerleri

@media (max-width: 768px){.....}

şuna çevirirseniz

@media (max-width: 1080px){......}

muhtemelen sorun çözülecektir...
 

 

RecepCakmakci RecepCakmakci WM Aracı Kullanıcı
  • Üyelik 07.07.2019
  • Yaş/Cinsiyet 32 / E
  • Meslek Muhasebeci
  • Konum Düzce
  • Ad Soyad R** Ç**
  • Mesajlar 168
  • Beğeniler 38 / 13
  • Ticaret 0, (%0)
Yardımınız için çok teşekkür ederim hocam fakat olmadı.
 

 

TEHET TEHET Kullanıcı
  • Üyelik 04.10.2014
  • Yaş/Cinsiyet 31 / E
  • Meslek Tasarımcı
  • Konum Ankara
  • Ad Soyad M** A**
  • Mesajlar 791
  • Beğeniler 96 / 374
  • Ticaret 1, (%100)


Sorun bu butondan kaynaklı gibi duruyor. Buton clasına text-truncate ekleyin.
RecepCakmakci

kişi bu mesajı beğendi.

wmaraci

RecepCakmakci RecepCakmakci WM Aracı Kullanıcı
  • Üyelik 07.07.2019
  • Yaş/Cinsiyet 32 / E
  • Meslek Muhasebeci
  • Konum Düzce
  • Ad Soyad R** Ç**
  • Mesajlar 168
  • Beğeniler 38 / 13
  • Ticaret 0, (%0)
Hocam çok teşekkür ederim problem çözüldü. Mantık nedir burada acaba?
 

 

TEHET TEHET Kullanıcı
  • Üyelik 04.10.2014
  • Yaş/Cinsiyet 31 / E
  • Meslek Tasarımcı
  • Konum Ankara
  • Ad Soyad M** A**
  • Mesajlar 791
  • Beğeniler 96 / 374
  • Ticaret 1, (%100)

RecepCakmakci adlı üyeden alıntı

Hocam çok teşekkür ederim problem çözüldü. Mantık nedir burada acaba?


Butonlarda kullanılan ".btn" classında "white-space: nowrap;" özelliği var. Bu metinlerin alt satıra inmesini engelliyor. Siz o butonda uzun bir cümle yazdığınız için ekrana sığmıyor ve ekranı sağa doğru genişletiyor. "position: fixed" gibi statik olmayan butonlar da genişleyen ekrana göre konumlanıyorlar.
 

 

wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al