How to format (centre) and change gaps in section liquid?

Store Design

Topic summary

A user is customizing a testimonial section on their Shopify store homepage and needs help with two formatting issues:

Main Issues:

  • Testimonials are left-aligned instead of center-aligned
  • Excessive spacing exists between testimonial quotes and authors, and between individual testimonials

Solution Provided:
Another user provided CSS code to be added to the theme.css file:

  • Centers text alignment for the specific section ID
  • Removes padding and margins from the testimonial container
  • Hides <br> tags to reduce spacing

Outcome:
The original poster confirmed the solution worked successfully.

Additional Development:
A different user later asked for help with a similar centering issue for a multicolumn section, involving heading alignment and image padding adjustments on their store (sustainfund.com).

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

Hi!

I’ve been trying to input a testimonial section in my home page but I’m having some issues adjusting the code:
To move the testimonials are all center align instead of left align,

I’m also trying to minimize the gap between the testimonial and the author or between testimonials so they don’t take up so much space.

Any help will be appreciated!

Thank you!

This is my code on the liquid section:

{{ section.settings.title }}

{%- if section.blocks.size > 0 -%} {%- for block in section.blocks -%}
{%- if block.settings.quote != blank -%}

{{ block.settings.quote }}

{%- endif -%}
{%- if block.settings.author != blank -%}

{{ block.settings.author }} {{ block.settings.position }}

{%- endif -%}
{%- endfor -%} {%- endif -%} .huratips-testimonial-container { float: center; border: 2px solid #FFFFFF; background-color: #FFFFFF; border-radius: 5px; padding: 10px; margin: 10px 0; } .huratips-testimonial-container::after { content: ""; clear: both; display: table; } .huratips-testimonial-container img { float: center; margin-right: 20px; border-radius: 50%; } .huratips-testimonial-container span { float: center; font-size: 15px; margin-right: 15px; } @media (max-width: 500px) { .huratips-testimonial-container { text-align: center; } .huratips-testimonial-container img { margin: auto; float: center; display: block; } } {% schema %} { "name": "Testimonials", "class": "index-section", "max_blocks": 25, "settings": [ { "type": "text", "id": "title", "label": "Heading", "default": "Testimonials" } ], "blocks": [ { "type": "quote", "name": "Testimonial", "settings": [ { "type": "richtext", "id": "quote", "label": "Text", "default": "

Add customer reviews and testimonials to showcase your store’s happy customers.

" }, { "type": "text", "id": "author", "label": "Author", "default": "Author’s name" } ] } ], "presets": [ { "name": "Testimonials", "category": "Text", "blocks": [ { "type": "quote" }, { "type": "quote" }, { "type": "quote" } ] } ] } {% endschema %}
1 Like
2

Hello There,

Please share your store URL and Screenshot.
So that I will check and let you know the exact solution here.

3

@cupcakes

Please share your store URL.

4

Hi! Our site is www.25gramsbakery.com . THank you!

5

hello @cupcakes

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

#shopify-section-1626166698eaa96cc8{
	    text-align: center;
}
#shopify-section-1626166698eaa96cc8 .huratips-testimonial-container br{
	    display: none;
}
#shopify-section-1626166698eaa96cc8 .huratips-testimonial-container{
	padding: 0;
        margin: 0;
}
2 Likes
6

Thank you it worked! :slightly_smiling_face:

7

Hi there, can you please help me solve a similar problem - I have set up a multicolumn section and want to centre the heading “The Problem” and play around with the padding between the heading and the images. URL is https://sustainedfun.com/

Thanks in advance!

8

hello! it is www.25gramsbakery.com