Çözüldü Siteyi mobil uyumlu hale getirme

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.
Katılım
8 Ekim 2020
Mesajlar
1.575
Makaleler
2
Çözümler
6
Daha fazla  
Cinsiyet
Erkek
Merhaba, bir HTML templatesi üzerine editleye editleye Discord botum için bir site yaptım. Ancak site mobil uyumlu değil, sanırım responsive denen tasarım gerekiyor ama ben yapmayı bilmiyorum. HTML, JS, CSS bilgim sıfır sayılır, bunu kolay şekilde nasıl halledebilirim?

Site
 
Çözüm
Uygundur hocam, yani girince eleman çıkmasın sıkılıp tek onu istemiyorum :) ugrastigin için çok teşekkür ederim.

Repo: GitHub - arsh-3/deauth: Pages for DeAuth

Merhabalar hocam durum nedir?

GitHub üzerinden gönderdim eğer yapamazsan kod;

CSS:
 header{
 display: flex;
 flex-direction: column;
 text-align: center;
 gap: 1rem;
 }

 header nav .top-nav{
 display:flex;
 }

 .nav-area li{
 padding: 0 10px;
 }

 .wrapper{
 width: 100% !important;
 }

 .home{
 margin-top: 2rem !important;
 }

 .home-text{
 width: 90%;
 }

 .home .home-text .container{
 min-height: auto;
 height: auto;
 justify-content: center;
 align-items: center;

 }

 .home .home-text .container p{
 margin-top: 5px;
 padding: 1rem 2.5rem;
 height: 8rem;
 margin-right: 0;

 }

 .home .home-text .container p span{
 display: inline-block;
 }

 .home-btn{
 display: block;
 }

Bu kodu
@Media screen and (Max-width: 500px) and (min-width: 100px) bunun içine yazacaksın. Altına yani containerin üstünde boşluk açıp yapıştırabilirsin hepsini.

1649533089350.png


Bu da telefon görüntüsü test ettim..
Bilmeden yapamazsın. WordPress falan kullanabilirseniz sizin için daha kolay olur. Eğer öğrenip yapmak istiyorsanız.


Eğer CSS hiç bilmiyorsan bu linkte size yeterli gelmez. Çünkü yazılan tüm CSS'leri tekrar düzenleyeceksin.
 
Bilmeden yapamazsın. WordPress falan kullanabilirseniz sizin için daha kolay olur. Eğer öğrenip yapmak istiyorsanız.


Eğer CSS hiç bilmiyorsan bu linkte size yeterli gelmez. Çünkü yazılan tüm CSS'leri tekrar düzenleyeceksin.

Peki böyle tool gibi bir şey yok mudur otomatik yapan? Site yari-responsive sayılır sadece birkaç yer değil. GitHub reposunu atsam yardımcı olur musunuz acaba eğer web developer falansanız.
 
Gönder biraz işim var müsait olunca bakarım.

Eki Görüntüle 1352703

Bu kadarı senin için uygun mu? Alt kısımlara pek bakmadım.

Uygundur hocam, yani girince eleman çıkmasın sıkılıp tek onu istemiyorum :) ugrastigin için çok teşekkür ederim.

Repo: GitHub - arsh-3/deauth: Pages for DeAuth
Gönder biraz işim var müsait olunca bakarım.

Eki Görüntüle 1352703

Bu kadarı senin için uygun mu? Alt kısımlara pek bakmadım.
Merhabalar hocam durum nedir?
 
Son düzenleme:
Uygundur hocam, yani girince eleman çıkmasın sıkılıp tek onu istemiyorum :) ugrastigin için çok teşekkür ederim.

Repo: GitHub - arsh-3/deauth: Pages for DeAuth

Merhabalar hocam durum nedir?

GitHub üzerinden gönderdim eğer yapamazsan kod;

CSS:
 header{
 display: flex;
 flex-direction: column;
 text-align: center;
 gap: 1rem;
 }

 header nav .top-nav{
 display:flex;
 }

 .nav-area li{
 padding: 0 10px;
 }

 .wrapper{
 width: 100% !important;
 }

 .home{
 margin-top: 2rem !important;
 }

 .home-text{
 width: 90%;
 }

 .home .home-text .container{
 min-height: auto;
 height: auto;
 justify-content: center;
 align-items: center;

 }

 .home .home-text .container p{
 margin-top: 5px;
 padding: 1rem 2.5rem;
 height: 8rem;
 margin-right: 0;

 }

 .home .home-text .container p span{
 display: inline-block;
 }

 .home-btn{
 display: block;
 }

Bu kodu
@Media screen and (Max-width: 500px) and (min-width: 100px) bunun içine yazacaksın. Altına yani containerin üstünde boşluk açıp yapıştırabilirsin hepsini.

1649533089350.png


Bu da telefon görüntüsü test ettim..
 
Çözüm
GitHub üzerinden gönderdim eğer yapamazsan kod;

CSS:
 header{
 display: flex;
 flex-direction: column;
 text-align: center;
 gap: 1rem;
 }

 header nav .top-nav{
 display:flex;
 }

 .nav-area li{
 padding: 0 10px;
 }

 .wrapper{
 width: 100% !important;
 }

 .home{
 margin-top: 2rem !important;
 }

 .home-text{
 width: 90%;
 }

 .home .home-text .container{
 min-height: auto;
 height: auto;
 justify-content: center;
 align-items: center;

 }

 .home .home-text .container p{
 margin-top: 5px;
 padding: 1rem 2.5rem;
 height: 8rem;
 margin-right: 0;

 }

 .home .home-text .container p span{
 display: inline-block;
 }

 .home-btn{
 display: block;
 }

Bu kodu.
@Media screen and (Max-width: 500px) and (min-width: 100px) bunun içine yazacaksın. Altına yani containerin üstünde boşluk açıp yapıştırabilirsin hepsini.

Eki Görüntüle 1354753

Bu da telefon görüntüsü test ettim.

Çok teşekkür ederim sağ olun hocam. Eve gidince publishleyeceğim. Çok sağ olun gercekten.
 
Son düzenleyen: Moderatör:

Technopat Haberler

Yeni konular

Geri
Yukarı