How do I fix the text columns with images so they are the same size?

[nonsie]

Hello.

I have a problem on desktop (on mobile its all the same size anyway) with the size of my text columns with images. When I have an odd number they have different sizes which is not very nice to look at. I would like them all to be the same size as when they are three in a row. As you can see in the picture, the top ones are huge and the bottom ones are the size I want. Even if I have only two blocks I would like them to be the same size as the three-ones. The best way would probably make sure they all are centered too, if I have an odd number?

Hope you can help. Ill add the link and password to the shop in a comment below.

[nonsie]

Link: https://www.hillstone.se/pages/produkter

Password:

[webwondersco]

@nonsie Could you please share the screenshot of your theme settings?

and also update that section with 2 column as of now so can guide your accordingly

[nonsie]

@webwondersco My Theme is Expanse and I’ve updated the page to only two columns now

[webwondersco]

@nonsie Please add the below line of CSS code at the end of your base.css file

@media(min-width:769px){
    .index-section .grid .grid__item.medium-up--one-half{
        width:33.33%
    }
}

result:

[nonsie]

Thank you so much, that worked perfect!

[nonsie]

@webwondersco Hello again! Is it possible to get some help with the same problem when it comes to collections as well? I would like them all to be the same size as when they are 4, if I only have two or one collection the images are huge.

This is the size I would like all of them to be, no matter the amount of collections.

[webwondersco]

@nonsie Could you please share the front password so can check and update you on the same

[nonsie]

@webwondersco sorry for the delay, here’s the password:

[webwondersco]

Add this at the end of your base.css file

@media(min-width:769px){
    .template-collection .new-grid .grid-item{
        flex:0 0 25%;
    }
}

[nonsie]

@webwondersco Thank you so much! Is it possible to add something to the code to get them centered as well?

[webwondersco]

@nonsie share the password again

[webwondersco]

@nonsie Yes sure update update the above CSS like given below

@media(min-width:769px){
    .template-collection .new-grid .grid-item{
        flex:0 0 25%;
    }
    .template-collection .new-grid{
       justify-content:center;
    }
}

[nonsie]

Thank you so much for all your help!

[nonsie]

@webwondersco I’m so sorry for asking you another question here, but you have been my savior so far with everything

Hello.

I wanted to add a metafield to my product grid which I did with this code:

{% if product.metafields.custom.framsida %}

{{ product.metafields.custom.framsida }}

{% endif %}

Everything works fine, but the problem is that depending on how long my title and metafield text is, the price is put on different heights. Like in this picture:

I have been trying to change the code to make sure the price is always shown at the bottom of the grid, no matter the amount of text on top of it. Would you be able to look through my code and see where changes can be made? I apologize for the long text following: Just tell me if you would like the password to the webpage instead

{% comment %}
/**

• @param {object} product - product object
• @param {string} [classes] - additional classes to add to the grid item
• @param {boolean} [no_actions] - whether to show the quick add and quick shop buttons
• @param {boolean} quick_add_enable - whether quick add is enabled
• @param {boolean} quick_shop_enable - whether quick shop is enabled
• @param {string} [type] - whether the grid item is horizontal or not
• @param {string} product_grid_image_size - the image size to use for the grid item
• @param {string} [image_style] - whether the image is square or circle
• @param {object} collection - the collection object
• @param {boolean} product_grid_image_fill - whether the image should fill the grid item
• @param {string} [sizes] - image sizes
• @param {string} [sizeVariable] - image size variable used in image size calculations
• @param {string} [fallback] - fallback used in image size calculations when first condition is not met
• @param {boolean} product_hover_image - whether second image will be shown on hover
• @param {boolean} enable_swatches - whether swatches are enabled
• @param {boolean} vendor_enable - whether to show the vendor
• @param {boolean} product_save_amount - show save amount
• @param {string} product_save_type - dollar or percent
• @param {boolean} enable_product_reviews - whether to show product reviews
• @param {string} [hydration] - hydration mode - (default: ‘on:idle’)
  */
  {% endcomment %}

{%- liquid
assign hydration = hydration | default: ‘on:idle’
assign on_sale = false
if product.compare_at_price > product.price
assign on_sale = true
endif

assign product_tags = product.tags | join: ‘,’
assign has_custom_label = false
assign custom_labels = ‘’
if product.metafields.theme.label and product.metafields.theme.label != blank
assign has_custom_label = true
assign custom_labels = product.metafields.theme.label.value
elsif product_tags contains ‘label’
for tag in product.tags
if tag contains ‘label’
assign tag_starts_with = tag | slice: 0
if tag_starts_with == ‘_’
assign has_custom_label = true
assign custom_label = tag | replace: ‘label’, ‘’
assign custom_labels = custom_labels | append: custom_label | append: ‘,’
endif
endif
endfor
endif
-%}

<is-land class=“grid-item” {{ hydration }}>

{%- unless no_actions -%}
{%- if quick_add_enable or quick_shop_enable -%}

{%- if quick_shop_enable and type != 'horizontal' -%} {%- capture quickShopButton -%} {% render 'icon-search' %} {{ 'products.general.quick_shop' | t }} {%- endcapture -%} {%- capture content -%} {% render 'tool-tip-trigger', button: quickShopButton, context: 'QuickShop', tool-tip-classes: 'quick-shop-modal', %} {%- endcapture -%} {%- render 'quick-shop', content: content -%} {%- endif -%} {%- if quick_add_enable and product.available -%} {% comment %} Quick add feature: - when a single variant option, product is immediately added - when multiple variants, popup with product form appears {% endcomment %} {%- if product.variants.size > 1 -%} {%- capture quickAddButton %} {% render 'icon-plus' %} {{ 'products.product.add_to_cart' | t }} {%- endcapture -%} {%- capture content -%} {% render 'tool-tip-trigger', button: quickAddButton, context: 'QuickAdd', tool-tip-classes: 'quick-add-modal', %} {%- endcapture -%} {% render 'quick-add', content: content %} {%- else -%} {%- capture content -%} {% render 'icon-plus' %} {{ 'products.product.add_to_cart' | t }} {%- endcapture -%} {% render 'quick-add', content: content %} {%- endif -%} {%- endif -%}

{%- endif -%} {%- endunless -%}

{%- liquid
assign imageRatio = product_grid_image_size
assign fixed_aspect_ratio = false
unless imageRatio == ‘natural’
assign fixed_aspect_ratio = true
endunless

if image_style == ‘circle’
assign fixed_aspect_ratio = true
assign imageRatio = ‘square’
endif

assign preview_image = product.featured_media.preview_image
-%}

{% render 'wishlisthero-collection-product' with product: product %}

{%- if has_custom_label -%} {%- assign labels = custom_labels | split: ',' -%} {%- for label in labels -%}

{{ label }}

{%- endfor -%} {%- endif -%}

{%- unless product.available -%}

{{ 'products.product.sold_out' | t }}

{%- endunless -%} {%- if on_sale and product.available -%}

{{ 'products.general.sale' | t }}

{%- endif -%}

{%- if fixed_aspect_ratio -%}

{%- capture image_classes -%} {% unless product_grid_image_fill %} grid__image-contain{% endunless %} image-style--{{ image_style }} {%- endcapture -%} {%- if preview_image != blank -%} {%- render 'image-element', img: preview_image, classes: image_classes, sizes: sizes, sizeVariable: sizeVariable, fallback: fallback, widths: '160, 200, 280, 360, 540, 720, 900', -%} {%- else -%} {%- capture placeholder -%}product-{% cycle 1, 2, 3, 4, 5, 6 %}{%- endcapture -%}

{{ placeholder | placeholder_svg_tag: 'placeholder-svg' }}

{%- endif -%}

{%- else -%} {%- liquid assign ratio = 1 if preview_image != blank assign ratio = preview_image.aspect_ratio endif -%}

{%- if preview_image != blank -%} {%- render 'image-element', img: preview_image, classes: 'grid-product__image', sizes: sizes, sizeVariable: sizeVariable, fallback: fallback, widths: '360, 540, 720, 900, 1080', -%} {%- else -%} {%- capture placeholder -%}product-{% cycle 1, 2, 3, 4, 5, 6 %}{%- endcapture -%}

{{ placeholder | placeholder_svg_tag: 'placeholder-svg' }}

{%- endif -%}

{%- endif -%}

{%- if product_hover_image and product.media.size > 1 -%}
{%- for media in product.media offset: 1 limit: 1 -%}
{%- assign second_image = media.preview_image -%}
{%- endfor -%}

{%- capture secondary_image_classes -%} image-style--{{ image_style }} {%- endcapture -%} {%- render 'image-element', img: second_image, classes: secondary_image_classes, sizes: sizes, sizeVariable: sizeVariable, fallback: fallback, widths: '360, 540, 720, 1000', -%}

{%- endif -%}

{%- if enable_swatches -%}
{%- assign swatch_trigger = ‘products.general.color_swatch_trigger’ | t | downcase -%}
{%- for option in product.options_with_values -%}
{%- liquid
assign option_name = option.name | downcase
assign is_color = false
if option_name contains swatch_trigger
assign is_color = true
elsif swatch_trigger == ‘color’ and option_name contains ‘colour’
assign is_color = true
endif
-%}
{%- if is_color -%}
{%- assign option_index = forloop.index0 -%}
{%- assign values = ‘’ -%}
{%- for variant in product.variants -%}
{%- assign value = variant.options[option_index] %}
{%- unless values contains value -%}
{%- assign values = values | join: ‘,’ | append: ‘,’ | append: value | split: ‘,’ -%}

{%- if variant.image -%}

{%- endif -%} {%- endunless -%} {%- endfor -%} {%- endif -%} {%- endfor -%} {%- endif -%}

{%- if enable_swatches and type == blank -%} {%- render 'swatches', product: product -%} {%- endif -%}

{{ product.title }}

{% if product.metafields.custom.framsida %}

{{ product.metafields.custom.framsida }}

{% endif %}

{%- if vendor_enable -%}

{{ product.vendor }}

{%- endif -%}

{%- if product.price_varies -%} {%- render 'price-varies', price: product.price_min, shop: shop, superscript_decimals: superscript_decimals, -%}

{%- else -%}
{%- if on_sale -%}
{{ ‘products.general.sale_price’ | t }}
{%- endif -%}

{%- render ‘price’,
price: product.price,
shop: shop,
superscript_decimals: superscript_decimals,
-%}

{%- endif -%}
{%- if on_sale -%}
{{ ‘products.general.regular_price’ | t }}

{%- render ‘price’,
price: product.compare_at_price,
shop: shop,
superscript_decimals: superscript_decimals,
-%}

{%- if product_save_amount -%}
{%- if product_save_type == ‘dollar’ -%}
{%- capture saved_amount -%}{{ product.compare_at_price | minus: product.price | money_without_trailing_zeros }}{%- endcapture -%}
{%- else -%}
{%- capture saved_amount -%}{{ product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round }}%{%- endcapture -%}
{%- endif -%}

{{ ‘products.general.save_html’ | t: saved_amount: saved_amount }}

{%- endif -%}
{%- endif -%}

{%- assign product_variant = product.selected_or_first_available_variant -%}
{%- if product_variant.unit_price_measurement -%}

{%- capture unit_price_base_unit -%} {%- if product_variant.unit_price_measurement -%} {%- if product_variant.unit_price_measurement.reference_value != 1 -%} {{ product_variant.unit_price_measurement.reference_value }} {%- endif -%} {{ product_variant.unit_price_measurement.reference_unit }} {%- endif -%} {%- endcapture -%}

{{ product_variant.unit_price | money }}/{{ unit_price_base_unit }}

{%- endif -%}

{%- if enable_product_reviews -%}

{%- endif -%}

{%- if enable_swatches and type == ‘horizontal’ -%}
{%- render ‘swatches’, product: product -%}
{%- endif -%}

[webwondersco]

@nonsie Please add the below line of CSS code.

[data-view="medium"] .grid-item__meta-secondary,
[data-view="large"] .grid-item__meta-secondary{
        position: absolute;
    bottom: 10px;
}
[data-view="medium"]  .grid-item__content,
[data-view="large"] .grid-item__content{
    height:100%;
    padding-bottom:45px;
}

Result:

[nonsie]

I can’t thank you enough, worked as a charm!

[webwondersco]

@nonsie You’re welcome! I’m glad to hear that!