CSS'de En Çok Zorlandığınız Kısımlar

Her şey iyi güzel fakat şu responsive olayı ne kadar baş ağırıtıyormuş ya. Her telefonda farklı görünüyor,birini çözüyosun pat diğeri başa bela. Bu responsive olayının tek kodla çözülmesi mümkün mü? İlla şart mı her çözünürlüğe ayrı kod yazmam?

İlk başta tasarımı yaparken ona göre ayarlarsanız responsive yaparken bazı kısımları değiştirseniz yetiyor.

Headere bir arkaplan rengi,onun üstüne bir başka div ile görsel,o görselin yanına 2 satırlık text ile altına bir buton koydum. Hepsine uyarlayana kadar uğraştırdı bayağı

Tasarimci arkadaş grid sistemine göre tasarladiğinda dökerken herhangi bi sorun olacagini sanmiyorum..

Bu kadar zor olmamalı aslında responsive Yazdığın CSS kodunu paylaşır mısın ?

Sitenin kendii iç kısmı kolayca uyuyor mobile.Siteyi baştan aşağı değiştim problem olmamıştı.Ama ayrı bir header tasarlayıp o headerdekileri mobil uyumlu yapmak ise siteden bağımsız çalışıyor gibi. Görsel kenara gidiyor,buton görselin üstüne.Sonra çözünürlük değişiyorum bakıyorum farklı problem. Bu arada CSS bilmeden diğer kodlara bakarak tahminen yaptığım için benden kaynaklı hatalar olma ihtimali de yüksek ​

.headeryazisi{
    top:42%;
    left:57%;
margin:-30px;
    font-size:16px;
    position:absolute;
    
}
.hedex a {
    background-color:#17cf60;
    color:#fff;
    font-size:20px;
    font-weight:bold;
    width:410px;
    border-radius:3px;
    padding:5px;
    position:absolute;
top:35%;
    left:57%;
    text-decoration:none;
margin:-30px;}

.headerimage {
top:20%;
    left:10%;
margin:0px;
    position:absolute;
    margin:-30px;

}


.headerside{
    
background: rgb(244,250,254);
background: -moz-linear-gradient(top, rgba(244,250,254,1) 0%, rgba(240,240,240,1) 100%);
background: -webkit-linear-gradient(top, rgba(244,250,254,1) 0%,rgba(240,240,240,1) 100%);
background: linear-gradient(to bottom, rgba(244,250,254,1) 0%,rgba(240,240,240,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4fafe', endColorstr='#f0f0f0',GradientType=0 );
height:600px;
}
@media screen and (max-width: 600px) {
    
.headeryazisi {
top:450px;
    left:45px;
margin:0;
    margin-top:25px;
    position:absolute;
    display:none;
}

        }
@media screen and (max-width: 600px) {
.headerimage{
top:90px;
margin-right:0px;    
    }
}
@media screen and (max-width: 600px) {
.hedex a {
        padding:2px;;
    width:270px;
    margin-left:-440px;
    font-size:14px;
    margin:-161px;
        margin-top:40px;
    top:570px;
    display:none;
    }
    
    }
@media screen and (max-width: 600px) {
.headerside {
    height:379px;
  }

Görünen o ki sizden dolayı kaynaklanıyor Position ile ilgili sıkıntılar çekiyorsunuz. Position kavramını tam olarak anladığınızda sorununuz çözülebilir aslında. CSS'i tam olarak öğrenmeye çalışın ve pratikler yapın. Ek olarak CSS'i öğrendikten sonra SASS'a geçiş yapabilirsiniz. Çok daha kolay ve rahat CSS yazmanızı sağlar