Design Question - Resize To Mobile Becomes Unreadable

Highlighted
New Member
4 0 0

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/Screen Shot 2019-07-18 at 1.42.51 AM.png

 

Screen Shot 2019-07-18 at 1.42.43 AM.png

 

Screen Shot 2019-07-18 at 1.42.26 AM.png

 

0 Likes

please share your site URL

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes
New Member
4 0 0

I apologize URL: https://www.staxxnutrition.com/

 

0 Likes

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.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes
New Member
4 0 0

The whole site is operating as intended except for the 2 product grids located in Main Menu > Products (Product Directory) and Main Menu > Products > STAXX Packs (Choose Your Pack). Everything else is acceptable for my current needs. 

0 Likes
New Member
4 0 0

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 %}
0 Likes