title: How can i get elements to stack on top of each other for mobile users without changing the view for desktop users
body: <p>As you can see in the screenshot, there is an image and then the title, price, options, add to cart button, countdown timer and description to the right. I'm happy with this but when I view this through a mobile browser, it doesn't look too appealing. How can I change my CSS/HTML so each of the elements next to the image are stacked below the image when viewing on a mobile ? </p>
  
  <p>Desktop View:
  <a href="https://i.stack.imgur.com/I95uX.png" rel="nofollow noreferrer">Desktop View</a></p>
  
  <p>Mobile View:
  <a href="https://i.stack.imgur.com/1YqBh.png" rel="nofollow noreferrer">Mobile View</a></p>
  
  <p>HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.photoarea {
   float: left;
   vertical-align: top;
   width: 50%;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
  }
  .detailsarea {
   float: left;
      width: 50%;
   vertical-align: top;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="grid" itemscope itemtype="http://schema.org/Product"&gt;
    &lt;meta itemprop="url" content="{{ shop.url }}{{ product.url }}"&gt;
    &lt;meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}"&gt;
  
  
    &lt;div class="photoarea"&gt;
      &lt;div class="grid"&gt;
        &lt;div class="grid-item large--eleven-twelfths text-center"&gt;
          &lt;div class="product-photo-container" id="productPhotoContainer-{{ section.id }}"&gt;
            {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
            {% for image in product.images %}
              {% capture img_wrapper_id %}productPhotoWrapper-{{ section.id }}-{{ image.id }}{% endcapture %}
              {% capture img_id %}productPhotoImg-{{ section.id }}-{{ image.id }}{% endcapture %}
              &lt;div class="lazyload__image-wrapper no-js product__image-wrapper{% unless image == featured_image %} hide{% endunless %}" id="{{ img_wrapper_id }}" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;" data-image-id="{{ image.id }}"&gt;
                {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
  
                &lt;img id="{{ img_id }}"
                    {% if forloop.first == true %}
                    src="{{ featured_image | img_url: '300x300' }}"
                    {% endif %}
                    class="lazyload no-js lazypreload"
                    data-src="{{ img_url }}"
                    data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                    data-aspectratio="{{ image.aspect_ratio }}"
                    data-sizes="auto"
                    alt="{{ image.alt | escape }}"
                     {% if section.settings.product_image_zoom_enable %} data-zoom="{{ image | img_url: '1024x1024', scale: 2 }}"{% endif %}&gt;
              &lt;/div&gt;
            
              {% if forloop.first == true %}
                &lt;noscript&gt;
                  &lt;img src="{{ image | img_url: '580x' }}"
                    srcset="{{ image | img_url: '580x' }} 1x, {{ image | img_url: '580x', scale: 2 }} 2x"
                    alt="{{ image.alt }}" style="opacity:1;"&gt;
                &lt;/noscript&gt;
              {% endif %}
            {% endfor %}
          &lt;/div&gt;
  
          &lt;div class="anotherdiv"&gt;
          {% if product.images.size &gt; 1 %}
            &lt;ul class="product-photo-thumbs grid-uniform" id="productThumbs-{{ section.id }}"&gt;
  
              {% for image in product.images %}
                &lt;li class="grid-item medium-down--one-quarter large--one-quarter"&gt;
                  &lt;a href="{{ image.src | img_url: '1024x1024', scale: 2 }}" class="product-photo-thumb product-photo-thumb-{{ section.id }}" data-image-id="{{ image.id }}"&gt;
                    &lt;img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}"&gt;
                  &lt;/a&gt;
                &lt;/li&gt;
              
              {% endfor %}
          &lt;/div&gt;
            &lt;/ul&gt;
          {% endif %}
  
  
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;div class="detailsarea"&gt;
  
      &lt;h1 class="h2" itemprop="name"&gt;{{ product.title }}&lt;/h1&gt;
  
      {% if section.settings.product_vendor_enable %}
        &lt;p class="product-meta" itemprop="brand"&gt;{{ product.vendor }}&lt;/p&gt;
      {% endif %}
  
      &lt;div itemprop="offers" itemscope itemtype="http://schema.org/Offer"&gt;
  
        {% assign variant = product.selected_or_first_available_variant %}
  
        &lt;meta itemprop="priceCurrency" content="{{ shop.currency }}"&gt;
        &lt;meta itemprop="price" content="{{ variant.price | divided_by: 100.00 }}"&gt;
  
        &lt;ul class="inline-list product-meta"&gt;
          &lt;li&gt;
            &lt;span id="productPrice-{{ section.id }}" class="h1"&gt;
              {% include 'price' with variant.price %}
            &lt;/span&gt;
          &lt;/li&gt;
          {% if product.compare_at_price_max &gt; product.price and section.settings.product_show_saved_amount %}
          &lt;li&gt;
            &lt;span id="comparePrice-{{ section.id }}" class="sale-tag large"&gt;
              {% assign compare_price = variant.compare_at_price %}
              {% assign product_price = variant.price %}
              {% include 'price-sale' %}
            &lt;/span&gt;
          &lt;/li&gt;
          {% endif %}
          {% if section.settings.product_reviews_enable %}
            &lt;li class="product-meta--review"&gt;
              &lt;span class="shopify-product-reviews-badge" data-id="{{ product.id }}"&gt;&lt;/span&gt;
            &lt;/li&gt;
          {% endif %}
        &lt;/ul&gt;
  
        &lt;hr id="variantBreak" class="hr--clear hr--small"&gt;
  
        &lt;link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}"&gt;
  
        &lt;form action="/cart/add" method="post" enctype="multipart/form-data" id="addToCartForm-{{ section.id }}"&gt;
          &lt;select name="id" id="productSelect-{{ section.id }}" class="product-variants product-variants-{{ section.id }}"&gt;
            {% for variant in product.variants %}
              {% if variant.available %}
  
                &lt;option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}"&gt;{{ variant.title }} - {{ variant.price | money_with_currency }}&lt;/option&gt;
  
              {% else %}
                &lt;option disabled="disabled"&gt;
                  {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                &lt;/option&gt;
              {% endif %}
            {% endfor %}
          &lt;/select&gt;
  
          {% if section.settings.product_quantity_enable %}
            &lt;label for="quantity" class="quantity-selector quantity-selector-{{ section.id }}"&gt;{{ 'products.product.quantity' | t }}&lt;/label&gt;
            &lt;input type="number" id="quantity" name="quantity" value="1" min="1" class="quantity-selector"&gt;
          {% endif %}
  
          &lt;button type="submit" name="add" id="addToCart-{{ section.id }}" class="btn"&gt;
            &lt;span class="icon icon-cart"&gt;&lt;/span&gt;
            &lt;span id="addToCartText-{{ section.id }}"&gt;{{ 'products.product.add_to_cart' | t }}&lt;/span&gt;
          &lt;/button&gt;
  
          {% if section.settings.product_quantity_message%}
            &lt;span id="variantQuantity-{{ section.id }}" class="variant-quantity {% if variant.inventory_management and variant.inventory_quantity &lt; 10 and variant.inventory_quantity &gt; 0 %} is-visible{% endif %}"&gt;
             {% if variant.inventory_management and variant.inventory_quantity &lt; 10 and variant.inventory_quantity &gt; 0 %}
                {% assign qty = variant.inventory_quantity %}
                {{ 'products.product.only_left' | t: count: qty }}
              {% endif %}
            &lt;/span&gt;
          {% endif %}
  
          {% if section.settings.product_incoming_message %}
            &lt;span id="variantIncoming-{{ section.id }}" class="variant-quantity {% if variant.inventory_management and variant.inventory_quantity &lt;= 0 and variant.incoming %} is-visible{% endif %}"&gt;
              {% if variant.inventory_management and variant.inventory_quantity == 0 or variant.inventory_quantity &lt; 0 and current_variant.incoming %}
                {% if variant.available %}
                  {% assign date = variant.next_incoming_date | date: "month_day_year" %}
                  {{ 'products.product.will_not_ship_until' | t: date: date  }}
                {% else %}
                  {% assign date = variant.next_incoming_date | date: "month_day_year" %}
                  {{ 'products.product.will_be_in_stock_after' | t: date: date }}
                {% endif %}
              {% endif %}
            &lt;/span&gt;
          {% endif %}
  
        &lt;/form&gt;
  
        &lt;hr&gt;
  
      &lt;/div&gt;
     
        &lt;div class="lewisdescription"&gt;
      &lt;div class="product-description rte" itemprop="description"&gt;
        {{ product.description }}
        &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>