# Where are breakpoints defined?

**URL:** <https://forum.shopware.com/t/where-are-breakpoints-defined/105992>\
**Category:** Themes & Design (EN)\
**Created:** [29. November 2024 um 10:12 UTC](https://forum.shopware.com/t/where-are-breakpoints-defined/105992 "2024-11-29T10:12:24Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![magnus](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/magnus/32/13222_2.png) [@magnus](https://forum.shopware.com/u/magnus)\
**Post date:** [29. November 2024 um 10:12 UTC](https://forum.shopware.com/t/where-are-breakpoints-defined/105992/1 "2024-11-29T10:12:24Z")

</div>

Hi  
I want to have much larger image on the product detail page.

So, I have changed the columns on the template „cms-block-gallery-buybox.html.twig“ from _col-lg-6 / col-lg-6_ to _col-lg-9 / col-lg-3_. And in Shopping Experiences changed „minimum height“ to 800px.

So far, so good 🙂

But, the image does not change size (of cource 🙃 it can not be that easy). Checking with the Web inspector I can see that the image is still at 454x454 pixel. And (part of) the source code is:  
`... sizes="(min-width: 1200px) 454px ... "`

So, the 400x400 image is selected (I think). What (and where) do I need to change, to have the 800x800 image selected for the breakpoint at 1200?

The closest file I have found is „thumbnail.html.twig“ with this code block:

```auto
{% set breakpoint = {
     xs: theme_config('breakpoint.xs'),
     sm: theme_config('breakpoint.sm'),
     md: theme_config('breakpoint.md'),
     lg: theme_config('breakpoint.lg'),
     xl: theme_config('breakpoint.xl')
 } %}

```

**But where are these breakpoints defined**? I have looked into the default theme.json but nothing about breakpoints…

/ Magnus

 ![Screenshot 2024-11-29 at 11.04.25](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/a/e/aee4bfd3de9136f68f4524f410a484de6a4c67f2.png)  
 ![Screenshot 2024-11-29 at 11.03.28](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/c/9/c9c605a2388357a67048f973fce517506c6c6ff6.jpeg)

---

<div class="post-metadata">

**Author:** ![Max\_Shop](https://avatars.discourse-cdn.com/v4/letter/m/58f4c7/32.png) [@Max\_Shop](https://forum.shopware.com/u/Max_Shop)\
**Post date:** [27. Dezember 2024 um 15:14 UTC](https://forum.shopware.com/t/where-are-breakpoints-defined/105992/2 "2024-12-27T15:14:16Z")

</div>

> **[Breakpoints](https://getbootstrap.com/docs/5.0/layout/breakpoints/)**
>
> Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in Bootstrap.

---

<div class="post-metadata">

**Author:** ![patricio.schranz](https://avatars.discourse-cdn.com/v4/letter/p/bbce88/32.png) [@patricio.schranz](https://forum.shopware.com/u/patricio.schranz)\
**Post date:** [17. Juli 2025 um 10:57 UTC](https://forum.shopware.com/t/where-are-breakpoints-defined/105992/3 "2025-07-17T10:57:53Z")

</div>

The breakpoints are defined directly in the getThemeconfig() method of the ThemeConfigValueAccessor class , not in the theme.json .