title: render one photo from mobile while it is rendered 4 photos on web Nuxtjs
body: <p>There are four images rendered from an API in the web browser.<br />
  I want to render only one photo while opening it from mobile,
  what are the possible ways to achieve this?</p>
  <p>The data fetched all the images together.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div
      class=&quot;
        fusion-fullwidth
        fullwidth-box
        fusion-builder-row-6
        hundred-percent-fullwidth
        non-hundred-percent-height-scrolling
        fusion-equal-height-columns
      &quot;
      style=&quot;
        background-color: #3e3731;
        background-position: left top;
        background-repeat: no-repeat;
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
        margin-bottom: 0px;
        margin-top: 0px;
        border-width: 0px 0px 0px 0px;
        border-color: #eae9e9;
        border-style: solid;
      &quot;
    &gt;
      &lt;div class=&quot;fusion-builder-row fusion-row&quot;&gt;
        &lt;div
          v-for=&quot;(collection, index) in box_collections&quot;
          :key=&quot;collection.bo_id&quot;
          :class=&quot;
            'fusion-layout-column fusion_builder_column fusion-builder-column-' +
            (index + 11) +
            ' fusion_builder_column_1_4 1_4 fusion-one-fourth fusion-no-small-visibility'
          &quot;
          style=&quot;margin-top: 0px; margin-bottom: 0px&quot;
        &gt;
          &lt;div
            class=&quot;fusion-column-wrapper fusion-flex-column-wrapper-legacy&quot;
            :style=&quot;
              'background-image: url(\'' +
              collection.bo_url +
              '\'); background-position: center center; background-repeat: no-repeat; background-size: cover; padding: 0px; min-height: 252px; height: auto;'
            &quot;
            :data-bg-url=&quot;collection.bo_url&quot;
          &gt;
            &lt;div
              class=&quot;fusion-column-content-centered&quot;
              style=&quot;min-height: 252px; height: auto&quot;
            &gt;
              &lt;div class=&quot;fusion-column-content&quot;&gt;
                &lt;div class=&quot;fusion-sep-clear&quot; /&gt;
                &lt;div
                  class=&quot;fusion-separator fusion-full-width-sep&quot;
                  style=&quot;
                    margin-left: auto;
                    margin-right: auto;
                    margin-top: 250px;
                    width: 100%;
                  &quot;
                /&gt;
                &lt;div class=&quot;fusion-sep-clear&quot; /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;fusion-clearfix&quot; /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>Shall I refetch them? Or is there any other solution?</p>