Wie kann ich Elemente für mobile Benutzer übereinander stapeln, ohne die Ansicht für Desktop-Benutzer zu ändern

Question

Wie Sie auf dem Screenshot sehen können, gibt es ein Bild und dann den Titel, Preis, Optionen, zum Warenkorb hinzufügen , Countdown-Timer und Beschreibung auf der rechten Seite. Ich bin damit zufrieden, aber wenn ich das über einen mobilen Browser ansehe, sieht es nicht besonders ansprechend aus. Wie kann ich mein CSS/HTML ändern, sodass jedes der Elemente neben dem Bild beim Betrachten auf einem Handy unter dem Bild gestapelt wird?

Desktop-Ansicht: Desktop View

Mobile Ansicht: Mobile View

HTML:

.photoarea { 
 
\t float: left; 
 
\t vertical-align: top; 
 
\t width: 50%; 
 
\t -webkit-box-sizing: border-box; 
 
\t -moz-box-sizing: border-box; 
 
\t box-sizing: border-box; 
 
} 
 
.detailsarea { 
 
\t float: left; 
 
    width: 50%; 
 
\t vertical-align: top; 
 
\t -webkit-box-sizing: border-box; 
 
\t -moz-box-sizing: border-box; 
 
\t box-sizing: border-box;

<div class="grid" itemscope itemtype="http://schema.org/Product"> 
 
    <meta itemprop="url" content="{{ shop.url }}{{ product.url }}"> 
 
    <meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}"> 
 

 

 
    <div class="photoarea"> 
 
    <div class="grid"> 
 
     <div class="grid-item large--eleven-twelfths text-center"> 
 
     <div class="product-photo-container" id="productPhotoContainer-{{ section.id }}"> 
 
      {% 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 %} 
 
      <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 }}"> 
 
       {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} 
 

 
       <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 %}> 
 
      </div> 
 
      
 
      {% if forloop.first == true %} 
 
       <noscript> 
 
       <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;"> 
 
       </noscript> 
 
      {% endif %} 
 
      {% endfor %} 
 
     </div> 
 

 
     <div class="anotherdiv"> 
 
     {% if product.images.size > 1 %} 
 
      <ul class="product-photo-thumbs grid-uniform" id="productThumbs-{{ section.id }}"> 
 

 
      {% for image in product.images %} 
 
       <li class="grid-item medium-down--one-quarter large--one-quarter"> 
 
       <a href="{{ image.src | img_url: '1024x1024', scale: 2 }}" class="product-photo-thumb product-photo-thumb-{{ section.id }}" data-image-id="{{ image.id }}"> 
 
        <img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}"> 
 
       </a> 
 
       </li> 
 
      
 
      {% endfor %} 
 
     </div> 
 
      </ul> 
 
     {% endif %} 
 

 

 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="detailsarea"> 
 

 
    <h1 class="h2" itemprop="name">{{ product.title }}</h1> 
 

 
    {% if section.settings.product_vendor_enable %} 
 
     <p class="product-meta" itemprop="brand">{{ product.vendor }}</p> 
 
    {% endif %} 
 

 
    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> 
 

 
     {% assign variant = product.selected_or_first_available_variant %} 
 

 
     <meta itemprop="priceCurrency" content="{{ shop.currency }}"> 
 
     <meta itemprop="price" content="{{ variant.price | divided_by: 100.00 }}"> 
 

 
     <ul class="inline-list product-meta"> 
 
     <li> 
 
      <span id="productPrice-{{ section.id }}" class="h1"> 
 
      {% include 'price' with variant.price %} 
 
      </span> 
 
     </li> 
 
     {% if product.compare_at_price_max > product.price and section.settings.product_show_saved_amount %} 
 
     <li> 
 
      <span id="comparePrice-{{ section.id }}" class="sale-tag large"> 
 
      {% assign compare_price = variant.compare_at_price %} 
 
      {% assign product_price = variant.price %} 
 
      {% include 'price-sale' %} 
 
      </span> 
 
     </li> 
 
     {% endif %} 
 
     {% if section.settings.product_reviews_enable %} 
 
      <li class="product-meta--review"> 
 
      <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span> 
 
      </li> 
 
     {% endif %} 
 
     </ul> 
 

 
     <hr id="variantBreak" class="hr--clear hr--small"> 
 

 
     <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}"> 
 

 
     <form action="/cart/add" method="post" enctype="multipart/form-data" id="addToCartForm-{{ section.id }}"> 
 
     <select name="id" id="productSelect-{{ section.id }}" class="product-variants product-variants-{{ section.id }}"> 
 
      {% for variant in product.variants %} 
 
      {% if variant.available %} 
 

 
       <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option> 
 

 
      {% else %} 
 
       <option disabled="disabled"> 
 
       {{ variant.title }} - {{ 'products.product.sold_out' | t }} 
 
       </option> 
 
      {% endif %} 
 
      {% endfor %} 
 
     </select> 
 

 
     {% if section.settings.product_quantity_enable %} 
 
      <label for="quantity" class="quantity-selector quantity-selector-{{ section.id }}">{{ 'products.product.quantity' | t }}</label> 
 
      <input type="number" id="quantity" name="quantity" value="1" min="1" class="quantity-selector"> 
 
     {% endif %} 
 

 
     <button type="submit" name="add" id="addToCart-{{ section.id }}" class="btn"> 
 
      <span class="icon icon-cart"></span> 
 
      <span id="addToCartText-{{ section.id }}">{{ 'products.product.add_to_cart' | t }}</span> 
 
     </button> 
 

 
     {% if section.settings.product_quantity_message%} 
 
      <span id="variantQuantity-{{ section.id }}" class="variant-quantity {% if variant.inventory_management and variant.inventory_quantity < 10 and variant.inventory_quantity > 0 %} is-visible{% endif %}"> 
 
      {% if variant.inventory_management and variant.inventory_quantity < 10 and variant.inventory_quantity > 0 %} 
 
       {% assign qty = variant.inventory_quantity %} 
 
       {{ 'products.product.only_left' | t: count: qty }} 
 
      {% endif %} 
 
      </span> 
 
     {% endif %} 
 

 
     {% if section.settings.product_incoming_message %} 
 
      <span id="variantIncoming-{{ section.id }}" class="variant-quantity {% if variant.inventory_management and variant.inventory_quantity <= 0 and variant.incoming %} is-visible{% endif %}"> 
 
      {% if variant.inventory_management and variant.inventory_quantity == 0 or variant.inventory_quantity < 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 %} 
 
      </span> 
 
     {% endif %} 
 

 
     </form> 
 

 
     <hr> 
 

 
    </div> 
 
    
 
     <div class="lewisdescription"> 
 
    <div class="product-description rte" itemprop="description"> 
 
     {{ product.description }} 
 
     </div> 
 
    </div>

Answer 1

Sie sollten Medienabfragen verwenden, um Ihre Elemente in einer anderen Art und Weise zu gestalten fo r ein kleinerer Bildschirm. Sie ändern dabei die CSS, die auf verschiedenen Bildschirmgrößen angewendet wird.

Sie müssen wahrscheinlich einige Versuche durchführen, um herauszufinden, wie Sie Ihre Artikel für den kleineren Bildschirm optimal darstellen können. Hier ist ein Beispiel für den Einstieg:

/* Small screens */ 
@media all and (max-width: 700px) { 
    .detailsarea, .photoarea {float:none; display:block} 
} 

Hier habe ich den Schwimmer entnommen und Block eine Anzeige, so dass detailsarea Element unter dem auf kleineren Bildschirmen photoarea Element angezeigt.