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

Solved
cupcakes
Excursionist
15 0 3

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 data-section-id="{{ section.id }}" data-section-type="Testimonial">
<h2>{{ section.settings.title }}</h2>
{%- if section.blocks.size > 0 -%}
{%- for block in section.blocks -%}
<div class="huratips-testimonial-container">
{%- if block.settings.quote != blank -%}<p>{{ block.settings.quote }}</p>{%- endif -%}
<br>{%- if block.settings.author != blank -%}<p><span>{{ block.settings.author }}</span> {{ block.settings.position }}</p>{%- endif -%}
</div>
{%- endfor -%}
{%- endif -%}
</section>
<style>
.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;
}
}
</style>
{% 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": "<p>Add customer reviews and testimonials to showcase your store’s happy customers.</p>"
},
{
"type": "text",
"id": "author",
"label": "Author",
"default": "Author’s name"
}
]
}
],
"presets": [
{
"name": "Testimonials",
"category": "Text",
"blocks": [
{
"type": "quote"
},
{
"type": "quote"
},
{
"type": "quote"
}
]
}
]
}
{% endschema %}

Pallavi
Shopify Expert
2239 370 486

Hello There,

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

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
dmwwebartisan
Shopify Partner
7448 1769 2368

@cupcakes 

Please share your store URL.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
cupcakes
Excursionist
15 0 3

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

0 Likes
Natztech
Shopify Partner
1433 403 959

This is an accepted solution.

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;
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
cupcakes
Excursionist
15 0 3

Thank you it worked!  

0 Likes