Shopify themes, liquid, logos, and UX
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 ↓
Below ↓
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
Solved! Go to the solution
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
}
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
}
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024