CSS Grid - 모바일 친화적으로 만들기

Question

좋은 하루,

CSS 그리드를 사용하는 웹 페이지에는 갤러리 섹션이 있습니다. 그것은 정상적인 웹 브라우저에서 완벽하게 작동하며, 규모를 줄이면 미디어 쿼리 (다른 이미지 다음에 하나의 이미지)를 사용하여 원하는대로 조정할 수있었습니다. 실망스럽게도 모바일 장치에서 볼 때 작동하지 않았습니다. .

이것은 제가 처음으로 만든 웹 사이트로 문제가 예상됩니다. 그러나 나는 지금 이것에 붙어있다.

모바일 브라우저에서 이미지를 아래에 배치해야합니다. 나는 이것에 대해 어떻게 갈 것인가? 아래에서 HTML & css를 참조하십시오. 내가 말하는 내용을보고 싶거나 https://codepen.io/underlight/pen/eyYLBa을 보려면 웹 페이지 redneckrebellion.co.za를 참조하십시오.

<content class="main-body"> 
<div class="main-content"> 
    <div class="portfolio"> 
     <div class="portfolio-item medium-one"> 
      <div class="description"> 
       <h1 class="text">Coffee Table</h1> 
       <p class="text">Custom Union Jack Coffee Table</p> 
      </div> 
     </div> 
     <div class="portfolio-item medium-two"> 
      <div class="description"> 
       <h1 class="text">Laser Cut Logo</h1> 
       <p class="text">Redneck Rebellion Laser Cut Logo</p> 
      </div> 
     </div> 
     <div class="portfolio-item wide-one"> 
      <div class="description"> 
       <h1 class="text">Custom Desk</h1> 
       <p class="text">Custom Desk Built To Clients Design</p> 
      </div> 
     </div> 
     <div class="portfolio-item tall"> 
      <div class="description"> 
       <h1 class="text">Container Cupboard</h1> 
       <p class="text">Custom Cupboard Built For Lillimex</p> 
      </div> 
     </div> 
     <div class="portfolio-item wide-two"> 
      <div class="description"> 
       <h1 class="text">Custom Shelf</h1> 
       <p class="text">Custom Shelf Built For Kids Car Themed Bedroom</p> 
      </div> 
     </div> 
    </div> 
</div> 

감사합니다!

Answer 1

이 작업을 수행하는 방법은 여러 가지가 있으며 질문에 따라이 div이 이미 가로로 표시되고 있다고 가정합니다. 즉 속성을 inline 또는 inline-block 또는 float으로 이미 사용하고 있습니다. 또한,

@media screen and (max-width: 480px) { 
    .medium-one, .medium-two .wide-one .tall .wide-two { 
     display:block; 
    } 
} 

은, 내가보기 엔 이미이 같은 위해 만든 라이브러리를 사용하는 것이 좋습니다 것입니다 : 당신은 재사용 할 무언가 (부트 스트랩 프레임 워크와 같은)를 가지고 싶다면, 당신은 이런 식으로 뭔가를 할 수 Bootstrap

Answer 2

가장 간단한 방법은이 같은 미디어 쿼리와 .portfolio-item을 둘러싸는 것입니다 같은 :

@media(min-width: 500px) { 
    .portfolio-item { 
    margin: 10px; 
    box-shadow: 1; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    border: 5px solid white; 
    border-radius: 3%; 
    } 
} 

Answer 3

The grid is a 12-column fluid grid with a max width of 960px, that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly. The syntax is simple and it makes coding responsive much easier. Go ahead, resize the browser. 

    <!-- .container is main centered wrapper --> 
<div class="container"> 

    <!-- columns should be the immediate child of a .row --> 
    <div class="row"> 
    <div class="one column">One</div> 
    <div class="eleven columns">Eleven</div> 
    </div> 

    <!-- just use a number and class 'column' or 'columns' --> 
    <div class="row"> 
    <div class="two columns">Two</div> 
    <div class="ten columns">Ten</div> 
    </div> 

    enter code here 

    <!-- there are a few shorthand columns widths as well --> 
    <div class="row"> 
    <div class="one-third column">1/3</div> 
    <div class="two-thirds column">2/3</div> 
    </div> 
    <div class="row"> 
    <div class="one-half column">1/2</div> 
    <div class="one-half column">1/2</div> 
    </div> 

</div> 

<!-- Note: columns can be nested, but it's not recommended since Skeleton's grid has %-based gutters, meaning a nested grid results in variable with gutters (which can end up being *really* small on certain browser/device sizes) -->