---
title: Bölümü mobil uyumlu hale getirme
description: Ürün listesi bölümünü mobil uyumlu hale getirme.
---

<Video src="/media/ikas-studio/basic-examples/product-list/making-section-mobile-responsive.mp4" autoPlay muted loop controls />

## Kırılma noktaları ekleme

Üst kısımdan **Tasarım** moduna geçiş yapın. Ardından ürün listesi bölümüne çift tıklayarak detayına girin. Canvas üzerinde yer alan tasarımın sağ üst kısmında bulunan artı ikonuna basarak **Tablet** ve **Mobil** için iki kırılma noktası ekleyin.

<Callout type="info" title="Kırılma noktaları">
Kırılma noktaları ile ilgili detaylı bilgilere [Kırılma Noktaları](https://builders.ikas.com/tr/docs/ikas-studio/content-and-design/global-values/breakpoints) sayfasından erişebilirsiniz.
</Callout>

## Mobil uyumlu stiller

**Katmanlar** kısmında eklediğiniz kırılma noktalarının geldiğini göreceksiniz. Değişiklik yapmak istediğiniz kırılma noktası altından `ProductList` element'ini seçerek `grid-template-columns` kısmında güncelleme yaparak bölümü mobil uyumlu hale getirmiş olursunuz.

## Önizleme

**İçerik** moduna geçerek üst kısımda bulunan kırılma noktalarının önizlemelerini değiştirebileceğiniz aracı kullanarak farklı ekran boyutlarında nasıl göründüğünü inceleyebilirsiniz.