Hello All,
I created my store and have it almost perfect for what I have envisioned. The only problem is, when I transition to my mobile phone, or a sufficiently small webpage, the image becomes incredibly thin. I uploaded the images below to show what happens during this transition.
I also noticed when I inspect on google, I can fix it by adjusting the media screen pixel width, but for some reason this line of code doesn't pop up in my code on my shopify. URL: https://www.staxxnutrition.com/
please share your site URL
I apologize URL: https://www.staxxnutrition.com/
I am having one more query, rather than this image is your whole site responsive for such small screen, because as I have checked now its not proper.
To add a little more information I believe it has to do with my code here:
product-grid-collage.liquid
{% assign collection_index__product = forloop.index %} {% assign remaining_length__product = collection_product_count__product | minus: collection_index__product %} {% comment %} If there are more than three items left we want to put them in a 3 or reverse 3 row 3 row = 1 large product on the left, 2 small on the right reverse 3 row = 2 small products on the left, 1 large on the right {% endcomment %} {% if remaining_length__product > 3 %} {% assign is_three_row__product = true %} {% endif %} {% comment %} Put remaining items in a 2 row if necessary. {% endcomment %} {% if remaining_length__product < 4 and three_row_index__product > 2 %} {% assign is_three_row__product = false %} {% endif %} {% comment %} If the total number of products is divisible by 3, we will just use 3 and reversed 3 item rows {% endcomment %} {% if divisible_by_three__product == 0 %} {% assign is_three_row__product = true %} {% endif %} {% comment %} If we set is_three_row__product to true based on the conditionals above. {% endcomment %} {% if is_three_row__product == true %} {% if three_row_index__product > 2 %} {% if is_reverse_row__product %} {% assign is_reverse_row__product = false %} {% else %} {% assign is_reverse_row__product = true %} {% endif %} {% assign three_row_index__product = 0 %} {% endif %} {% comment %} Assign grid classes for 3 rows and reverse 3 rows {% endcomment %} {% case three_row_index__product %} {% when 0 %} {% if is_reverse_row__product %} {%- assign width = 270 -%} {%- assign height = 190 -%} {% assign grid_item_width = 'grid__item--small one-whole reverse' %} {% else %} {%- assign width = 650 -%} {%- assign height = 480 -%} {% assign grid_item_width = 'grid__item--large one-whole medium--two-thirds large--two-thirds' %} {% endif %} {% when 1 %} {% if is_reverse_row__product %} {%- assign width = 270 -%} {%- assign height = 190 -%} {% assign grid_item_width = 'grid__item--small one-whole reverse' %} {% else %} {%- assign width = 270 -%} {%- assign height = 190 -%} {% assign grid_item_width = 'grid__item--small one-whole medium--one-third large--one-third' %} {% endif %} {% when 2 %} {% if is_reverse_row__product %} {%- assign width = 650 -%} {%- assign height = 480 -%} {% assign grid_item_width = 'grid__item--large one-whole medium--two-thirds large--two-thirds reverse clearfix' %} {% else %} {%- assign width = 270 -%} {%- assign height = 190 -%} {% assign grid_item_width = 'grid__item--small one-whole medium--one-third large--one-third clearfix' %} {% endif %} {% endcase %} {% if three_row_index__product == 0 %} <div class="grid__item collage-grid__row"> <div class="grid"> {% endif %} {% comment %} Wrap one-third items in reversed groups, so they can be floated properly without changing the order of products in the grid. {% endcomment %} {% if is_reverse_row__product and three_row_index__product == 0 %} <div class="grid__item collage-grid__reverse--wrapper one-whole medium--one-third large--one-third"> <div class="grid"> {% endif %} {% comment %}Product Grid Item{% endcomment %} {% include 'product-grid-item' %} {% comment %} Close out wrapper div for one-third reverse items {% endcomment %} {% if is_reverse_row__product and three_row_index__product == 1 %} </div> </div> {% endif %} {% if three_row_index__product == 2 %} </div> </div> <div class="grid__row-separator"></div> {% endif %} {% comment %} Increment the group of three counter {% endcomment %} {% if three_row_index__product <= 2 %} {% assign three_row_index__product = three_row_index__product | plus: 1 %} {% endif %} {% continue %} {% endif %} {% if collection_product_count__product == 1 %} {% comment %} Set full width when there is 1 product in a collection by making `grid_item_width` an empty string {% endcomment %} {% assign grid_item_width = '' %} {%- assign image_size = 'max' -%} {%- assign width = 100% -%} {%- assign height = 630 -%} {% include 'product-grid-item' %} {% break %} {% else %} {% comment %} Set item with to half if it isn't in a 3 row. {% endcomment %} {% assign grid_item_width = 'one-whole medium--one-half large--one-half' %} {%- assign image_size = 'max' -%} {%- assign width = 100% -%} {%- assign height = 270 -%} {% include 'product-grid-item' %} {% comment %}add grid row separator between the last two rows{% endcomment %} {% if remaining_length__product == 2 %} <div class="grid__row-separator"></div> {% endif %} {% comment %} We still need to increment the three_row_index_product {% endcomment %} {% if three_row_index__product <= 2 %} {% assign three_row_index__product = three_row_index__product | plus: 1 %} {% endif %} {% endif %}
Subject | Author | Posted |
---|---|---|
26m ago | ||
29m ago | ||
31m ago | ||
an hour ago | ||
2 hours ago |