0
스크린 샷에서 볼 수 있듯이 이미지와 제목, 가격, 옵션, 장바구니에 추가 버튼이 있습니다. , 카운트 다운 타이머 및 설명이 오른쪽에 표시됩니다. 나는 이것에 만족하지만 모바일 브라우저를 통해 이것을 보았을 때 너무 매력적이지는 않다. 모바일에서 볼 때 이미지 옆의 각 요소가 이미지 아래에 스택되도록 CSS/HTML을 어떻게 변경합니까?데스크톱 사용자의보기를 변경하지 않고 모바일 사용자를 위해 서로 다른 요소를 쌓을 수있는 방법
바탕 화면보기 : Desktop View
모바일보기 : 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>