Solved

Spacing above and below product

Nyuu
Excursionist
31 0 11

So I have noticed on mobile view, some of my products and the white space above + below the product image is too big and varies between products? I have all the Padding margins on the lowest setting but still can’t seem to fix it!

 

above ↓

5355288E-7C9A-494B-8FAA-D508361A6F08.png

Below ↓

C7B54719-91CF-4726-A452-0ABBED462319.png

 

Preferably I would like them all to have the same amount of white space that isn’t so big that doesn’t require mega scrolling! >_<

 

website: negimelon.com

theme: dawn 

Accepted Solution (1)

EcomGraduates1
Shopify Partner
80 3 7

This is an accepted solution.

try adding this to the top of the  code in the section you are working with 

{% liquid 
    assign pt = section.settings.pt | prepend: 'pt-'
    assign pb = section.settings.pb | prepend: 'pb-'
    assign mt = section.settings.mt | prepend: 'mt-'
    assign mb = section.settings.mb | prepend: 'mb-'
    
    assign row_xs =  section.settings.row_xs | prepend: 'row-cols-'
    assign row_sm =  section.settings.row_sm | prepend: 'row-cols-sm-'
    assign row_lg =  section.settings.row_lg | prepend: 'row-cols-lg-'
%}

 

then adding the settings  

{
            "type": "range",
            "id": "row_xs",
            "label": "Items per row - mobile",
            "min": 1,
            "max": 3,
            "step": 1,
            "default": 2
        },
        {
            "type": "range",
            "id": "row_sm",
            "label": "Items per row - tablet",
            "min": 1,
            "max": 4,
            "step": 1,
            "default": 2
        },
        {
            "type": "range",
            "id": "row_lg",
            "label": "Items per row - desktop",
            "min": 1,
            "max": 6,
            "step": 1,
            "default": 3
        },
        {
            "type": "header",
            "content": "Spacing",
            "info": "Based on Bootstrap spacing utility classes [Learn more](https://getbootstrap.com/docs/5.0/utilities/spacing/)"
        },
        {
            "type": "range",
            "id": "pt",
            "label": "Padding top",
            "min": 0,
            "max": 16,
            "step": 1,
            "default": 0
        },
        {
            "type": "range",
            "id": "pb",
            "label": "Padding bottom",
            "min": 0,
            "max": 16,
            "step": 1,
            "default": 0
        },
        {
            "type": "range",
            "id": "mt",
            "label": "Margin top",
            "min": 0,
            "max": 16,
            "step": 1,
            "default": 0
        },
        {
            "type": "range",
            "id": "mb",
            "label": "Margin bottom",
            "min": 0,
            "max": 16,
            "step": 1,
            "default": 0
        }
We design and develop stunning websites to make your customers fall in love with your business.
5 star reviews https://ecomgraduates.com/

View solution in original post

Replies 2 (2)

EcomGraduates1
Shopify Partner
80 3 7

This is an accepted solution.

try adding this to the top of the  code in the section you are working with 

{% liquid 
    assign pt = section.settings.pt | prepend: 'pt-'
    assign pb = section.settings.pb | prepend: 'pb-'
    assign mt = section.settings.mt | prepend: 'mt-'
    assign mb = section.settings.mb | prepend: 'mb-'
    
    assign row_xs =  section.settings.row_xs | prepend: 'row-cols-'
    assign row_sm =  section.settings.row_sm | prepend: 'row-cols-sm-'
    assign row_lg =  section.settings.row_lg | prepend: 'row-cols-lg-'
%}

 

then adding the settings  

{
            "type": "range",
            "id": "row_xs",
            "label": "Items per row - mobile",
            "min": 1,
            "max": 3,
            "step": 1,
            "default": 2
        },
        {
            "type": "range",
            "id": "row_sm",
            "label": "Items per row - tablet",
            "min": 1,
            "max": 4,
            "step": 1,
            "default": 2
        },
        {
            "type": "range",
            "id": "row_lg",
            "label": "Items per row - desktop",
            "min": 1,
            "max": 6,
            "step": 1,
            "default": 3
        },
        {
            "type": "header",
            "content": "Spacing",
            "info": "Based on Bootstrap spacing utility classes [Learn more](https://getbootstrap.com/docs/5.0/utilities/spacing/)"
        },
        {
            "type": "range",
            "id": "pt",
            "label": "Padding top",
            "min": 0,
            "max": 16,
            "step": 1,
            "default": 0
        },
        {
            "type": "range",
            "id": "pb",
            "label": "Padding bottom",
            "min": 0,
            "max": 16,
            "step": 1,
            "default": 0
        },
        {
            "type": "range",
            "id": "mt",
            "label": "Margin top",
            "min": 0,
            "max": 16,
            "step": 1,
            "default": 0
        },
        {
            "type": "range",
            "id": "mb",
            "label": "Margin bottom",
            "min": 0,
            "max": 16,
            "step": 1,
            "default": 0
        }
We design and develop stunning websites to make your customers fall in love with your business.
5 star reviews https://ecomgraduates.com/
Nyuu
Excursionist
31 0 11

@EcomGraduates1 Sorry for the late reply but thank you very much! >w<