Hello,
All product images on product page have space on the sides on mobile view. I would like to see the product image with full width. Thanks in advance!
Store: https://groupedamis.com/
@Winnne0195 - it is strictly bound in outer div tag which has space around it, if we make it full width then even the text will start from left
Hello @suyash1 ,
Thank you for your reply. I understand, I will leave it like this. Do you know how to add a image counter for mobile view like shown on the below screenshot?
@Winnne0195 - it looks like image thumbnail counter, please check slider code to check if you have an option to enable it
I do not have a code for slider and also no possibility to change it in the GUI. I found below code, is there maybe something I can change to add image counter?
{% comment %}
Parameters
context - used to determine whether on the featured product or main product template
sizes
sizeVariable
fallback
{% endcomment %}
{%- liquid
Product images and thumbnails on the main product template should load early
if context == ‘main-product’
assign loading = ‘eager’
endif
-%}
{%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}
{%- unless product.empty? -%}
{%- for media in product.media -%}
{%- render 'media',
section_id: section_id,
media: media,
featured_media: featured_media,
loopIndex0: forloop.index0,
loopIndex: forloop.index,
product_zoom_enable: product_zoom_enable,
product_zoom_size: product_zoom_size,
product_image_size: product_image_size,
isModal: isModal,
video_looping: video_looping,
video_style: video_style,
sizes: sizes,
sizeVariable: sizeVariable,
fallback: fallback,
loading: loading,
-%}
{%- endfor -%}
{%- assign first_3d_model = product.media | where: ‘media_type’, ‘model’ | first -%}
{%- if first_3d_model -%}
<button
aria-label=“{{ ‘products.product.view_in_space_label’ | t }}”
class=“product-single__view-in-space”
data-shopify-xr
data-shopify-model3d-id=“{{ first_3d_model.id }}”
data-shopify-title=“{{ product.title }}”
data-shopify-xr-hidden
{{ ‘products.product.view_in_space’ | t }}
{%- endif -%}
{%- if thumbnail_arrows -%}
{%- endif -%}
{%- if product.media.size > 1 -%}
{%- for media in product.media -%}
{%- liquid
assign image_set = false
assign image_set_group = ''
if media.alt contains '#'
assign image_set_full = media.alt | split: '#' | last
if image_set_full contains '_'
assign image_set = true
assign image_set_group = image_set_full | split: '_' | first
endif
endif
-%}
{%- endfor -%}
{%- endif -%}
{%- if thumbnail_arrows -%}
{%- endif -%}
{% if thumbnail_height == ‘fixed’ %}
{% style %}
.product__photos-{{ section_id }} .product__thumbs:not(.product__thumbs–below) {
min-height: 400px;
max-height: 400px;
}
@media screen and (max-width: 798px) {
.product__photos-{{ section_id }} .product__thumbs:not(.product__thumbs–below) {
min-height: 300px;
max-height: 300px;
}
}
{% endstyle %}
{% endif %}
{%- else -%}
{%- endunless -%}