如何在不更改桌面用户视图的情况下为移动用户提供相互堆叠的元素

Question

正如您在屏幕截图中看到的那样，有一个图像，然后是标题，价格，选项，添加到购物车按钮，倒数计时器和右侧描述。我对此很满意但是当我通过移动浏览器查看时，它看起来并不太吸引人。如何更改我的CSS / HTML，以便在移动设备上查看时，图像旁边的每个元素都堆叠在图像下方？

桌面视图：Desktop View

移动视图：Mobile View

HTML：

.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;

<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

您应该使用媒体查询以不同的方式为较小的屏幕排列元素。你这样做是为了改变在不同屏幕尺寸下应用的css。

您可能需要进行一些试验和错误，以确定如何以最佳方式显示较小屏幕的项目。这是一个让你入门的例子：

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

在这里，我删除了浮动并添加了一个显示块，以便detailsarea元素将显示在较小屏幕上的photoarea元素下方。