Difference between previewing and editing a module

[Sergey_N]

I created a module for the practical assignment of the developer's course. While previewing the module and the page itself with this module, everything works: I have 3 columns, they change depending on the width. But when I create and edit the page using the theme with this module, everything is reset to one column.

This is code of module

<div class="container">
{% for item in module.field_group %}
<div class="item">
	{% if item.image_field.src %}
		{% set sizeAttrs = 'width="{{ item.image_field.width }}" height="{{ item.image_field.height }}"' %}
		{% if item.image_field.size_type == 'auto' %}
			{% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
		{% elif item.image_field.size_type == 'auto_custom_max' %}
			{% set sizeAttrs = 'width="{{ item.image_field.max_width }}" height="{{ item.image_field.max_height }}" style="max-width: 100%; height: auto;"' %}
		{% endif %}
		 {% set loadingAttr = item.image_field.loading != 'disabled' ? 'loading="{{ item.image_field.loading }}"' : '' %}
		<img src="{{ item.image_field.src }}" alt="{{ item.image_field.alt }}" {{ loadingAttr }} {{ sizeAttrs }}>
	{% endif %}
	{% inline_rich_text field="richtext_field" value="{{ item.richtext_field }}" %}
      </div>
{% endfor %}
</div>

.container{
  font-family: sans-serif;
  display: flex;
  flex-wrap: wrap;
  width:100%;
}
.item{
  width:33%;
}
@media (max-width:900px){
    .item{
         width:50%;
    }
  

[dbeau79]

@Sergey_N , most likely there's a css file attached to your theme that is overriding your display: flex rule on the "container" class.  If you can send a link over though I'd be happy to take a look.

[dennisedson]

@Sergey_N ,

You might need to provide a link to a page with this on it to better debug.

@dbeau79 might be able to assist 😉