title: My Images are not showing up on my Shopify website when I upload in Shopify theme editor. With Code Atom Theme Custom Section
body: <p>Im trying too create a custom section where a user can use the theme editor to upload images in a four column row. Ive been hitting a stump on the layout and this method I came close but my images I load in the theme editor won't load. Please Help me I'm trying different routes from YouTube and online forum but this is the closest I've got.
  Basically I'm trying to add four columns in a even row with about 15 margin between each box and no matter what image the upload it will upload and resize to the aspect ratio I preset.</p>
  <p>My Html/Liquid File looks like this</p>
  <pre><code>&lt;div class=&quot;container-1&quot;&gt;
              &lt;div class=&quot;productfeatures&quot;&gt;
                  &lt;div class=&quot;col-md-3&quot;&gt;
                      &lt;p&gt;
  &lt;img class=&quot;img&quot; src=&quot;{{ section.settings.image | img_url: 'master' }}&quot; /&gt;                  &lt;/p&gt;
                      &lt;p&gt;
                          &lt;a class=&quot;btn&quot; href=&quot;#&quot;&gt;View details »&lt;/a&gt;
                      &lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;col-md-3&quot;&gt;
                      &lt;p&gt;
  &lt;img class=&quot;img&quot; src=&quot;{{ section.settings.image | img_url: 'master' }}&quot; /&gt;                  &lt;/p&gt;
                      &lt;p&gt;
                          &lt;a class=&quot;btn&quot; href=&quot;#&quot;&gt;View details »&lt;/a&gt;
                      &lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;col-md-3&quot;&gt;
                      &lt;p&gt;
  &lt;img class=&quot;img&quot; src=&quot;{{ section.settings.image | img_url: 'master' }}&quot; /&gt;                  &lt;/p&gt;
                      &lt;p&gt;
                          &lt;a class=&quot;btn&quot; href=&quot;#&quot;&gt;View details »&lt;/a&gt;
                      &lt;/p&gt;
                  &lt;/div&gt;
          &lt;div class=&quot;col-md-3&quot;&gt;
            &lt;p&gt;
  &lt;img class=&quot;img&quot; src=&quot;{{ section.settings.image | img_url: 'master' }}&quot; /&gt;                  &lt;/p&gt;
            &lt;p&gt;
              &lt;a class=&quot;btn&quot; href=&quot;#&quot;&gt;View details »&lt;/a&gt;
            &lt;/p&gt;
          &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  {% schema %}
      {
          &quot;name&quot;: &quot;Product Features&quot;,
          &quot;max_blocks&quot;: 4,
          &quot;presets&quot;: [
                    {
                        &quot;category&quot;: &quot;Image&quot;,
                        &quot;name&quot;: &quot;Product Feature&quot;
                    }
          ],
          &quot;blocks&quot;: [
              {
                  &quot;name&quot;: &quot;Product Feature&quot;,
                  &quot;type&quot;: &quot;Product-feature&quot;,
                  &quot;settings&quot;: [
                      {
                        &quot;type&quot;: &quot;image_picker&quot;,
                        &quot;id&quot;: &quot;image_picker&quot;,
                        &quot;label&quot;: &quot;Image&quot;
                      }
                  ]
              }
          ]
      }
  {% endschema %}
  
  {% stylesheet %}
  {% endstylesheet %}
  
  {% javascript %}
  
  {% endjavascript %}
  </code></pre>
  <p>My CSS Sheet it</p>
  <pre><code>.container-1{
    display: grid;
  gap: 0 25px;
   grid-template-rows: 1fr;
  max-width: 100%;
  }
  .col-md-3 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 25%;
        -ms-flex: 0 0 25%;
            flex: 0 0 25%;
  
  
  
  }
  
  .productfeatures {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
  
  }
  </code></pre>