【Dawn】バナーを横並びにしたい

[w_konori]

現在縦並びになっているバナーを、PCでは２行２列の並びに、SPでは縦並びのままにしたいですが、CSSの記述方法やその他で必要な設定が分からず大変困っております。

お分かりになる方がいらっしゃいましたら、ご教授頂きたくお願い致します。

初めての質問なので内容に不足がありましたら申し訳ございません。

現在のliquidファイルは下記の通りです。

{% for block in section.blocks %}
<a href="{{ block.settings.link }}">
<img src="{{ block.settings.image_box | img_url: 'master' }}" alt="{{ block.settings.image_box.alt }}">
</a>
{% endfor %}

{% schema %}
{
"name": "画像ボックス",
"blocks": [
{
"type": "image",
"name": "画像block",
"settings": [
{
"type": "image_picker",
"id": "image_box",
"label": "画像を選ぶ"
},
{
"type": "url",
"id": "link",
"label": "URL"
}
]
}
],

"presets": [
{
"name": "イメージボックス",
"category": "画像"
}
]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

[福水正太 · Accepted solution]

はじめまして。

株式会社ファイブビットの福水と申します。

メモ帳でもなんでもいいので、バックアップを必ず撮った上で、上記のコードを下記のように書き換えてみてください。

<div class="pc_2column">
{% for block in section.blocks %}
<a href="{{ block.settings.link }}">
<img src="{{ block.settings.image_box | img_url: 'master' }}" alt="{{ block.settings.image_box.alt }}">
</a>
{% endfor %}
</div>

{% schema %}
{
"name": "画像ボックス",
"blocks": [
{
"type": "image",
"name": "画像block",
"settings": [
{
"type": "image_picker",
"id": "image_box",
"label": "画像を選ぶ"
},
{
"type": "url",
"id": "link",
"label": "URL"
}
]
}
],

"presets": [
{
"name": "イメージボックス",
"category": "画像"
}
]
}
{% endschema %}

<style>
@media screen and (min-width: 769px) {
  .pc_2column {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .pc_2column a {
    display: block;
    width: 49%;
  }
}
</style>

{% javascript %}
{% endjavascript %}

もし意図した表示にならなかった場合は、スクショなどでその時の画面の状態を共有していただけると嬉しいです。

[w_konori]

ご教授いただき、ありがとうございます！
教えていただいたコードに書き換え、<style>内を下記の通り調整したところ想定したデザインになりました。

<style>
@media screen and (min-width: 769px) {
.pc_2column {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.pc_2column a {
display: block;
width: 49.5%;
}
.pc_2column a img {
width: 100%;
height: auto;
}
}

@media screen and (max-width: 768px) {
.pc_2column {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.pc_2column a {
display: block;
width: 100%;
}
.pc_2column a img {
width: 100%;
height: auto;
}
}
</style>