Div ve CSS Width Problemi

17-02-2017, 06:05:42

Arkadaşlar selam, yaklaşık 4 saattir uğraşıyorum işin içinden çıkamadım, elimde bir kod var, 4 tane fotoğrafı div yaptım yan yana ve alt alta dizdim, pc deyken problem yok fakat mobilden girdiğimde fotoğraflar yana doğru kayıyor. mobilde width ayarını bir türlü yapamadım oto. küçülmesini istiyorum, kodları paylaşıyorum eksiğim nerde yardımcı olursanız çok sevinirim.

<div class="anasayfa">
<style type="text/css">



div.bgd {
	max-width: 100%;
  float:left;
  width:100%;
  height:auto;
  min-height:300px;
  border:0px solid #e1e1e1;
  clear:both;
  

}
div.items-1 {
  clear:both;
  float:left;



  
}
div.items-2 {
	clear:right;
  float:right;

  
}
div.items-3{
	clear:both;
  float:left;
    position: absolute;

  
}

div.items-4{
	clear:both;
  float:right;

  
}

div.items-1, div.items-2, div.items-3, div.items-4 {
  width:31%;
  height:auto;
  min-height:300px;
  margin:1%
}

@media screen and (max-width:479px){
  

	
  div.items-1, div.items-2, div.items-3, div.items-4 {
  clear:both;
  float:left;
  height:auto;
  width: 100%;
  min-height:300px;
  margin:1%
  
  
    }
}


</style>
</head>

<body>

<div class="bgd">
   <div class="items-1"><a href="https://xxxxxxxxxx.com/index.php?route=product/category&amp;path=60"><img  src="http://xxxxxxxxxx.com/image/catalog/ana-2.png"></a> </div> 
  
   <div class="items-2"><a href="https://xxxxxxxxxx.com/index.php?route=product/category&amp;path=60"><img  src="http://xxxxxxxxxx.com/image/catalog/sahmeran.png"></a></div>  <br><br><br><br><br><br><br><br><br><br>
    <div class="items-3"><a href="https://xxxxxxxxxx.com/index.php?route=product/category&amp;path=60"><img  src="http://xxxxxxxxxx.com/image/catalog/kolyes.png"></a></div> 
    
        <div class="items-4"><a href="https://xxxxxxxxxx.com/index.php?route=product/category&amp;path=60"><img  src="http://xxxxxxxxxx.com/image/catalog/kupes.png"></a></div> 


   


</body>
</html>

17-02-2017, 06:42:24

#2

StyleWaR

Mesajım bulunsun, gün içerisinde bakacağım mobilim.

17-02-2017, 23:23:41

#3

eNaproject

Çok sevinirim valla.

17-02-2017, 23:50:46

#4

Daryl

http://codepen.io/anon/pen/ygWoNB

<div class="bgd">
  
  <div class="items-1">
    <a href="https://xxxxxxxxxx.com/index.php?route=product/category&amp;path=60">
      <img  src="http://lorempixel.com/400/200/">
    </a>
  </div> 

  <div class="items-2">
    <a href="https://xxxxxxxxxx.com/index.php?route=product/category&amp;path=60">
      <img  src="http://lorempixel.com/400/200/">
    </a>
  </div>

  <div class="items-3">
    <a href="https://xxxxxxxxxx.com/index.php?route=product/category&amp;path=60">
      <img  src="http://lorempixel.com/400/200/">
    </a>
  </div> 

  <div class="items-4">
    <a href="https://xxxxxxxxxx.com/index.php?route=product/category&amp;path=60">
      <img  src="http://lorempixel.com/400/200/">
    </a>
  </div> 
  
</div>

.bgd{
  width: 100%;
  position: relative;
  text-align: center
}

.bgd > *{
  display: inline-block;
  width: calc(100% / 2 - 8px);
  margin: 2px
}

.bgd > * img{
  width: 100%;
  height: auto;
  max-width: 100%
}

@media screen and (max-width: 480px) {
  .bgd > *{
    display: block;
    width: 100%;
    margin: 2px 0
  }
}

18-02-2017, 00:13:07

#5