Shopify Debut Theme - Text Columns with Images Spacing problem.

iamaidl
Tourist
10 0 0
Good morning,
 
I'm making a design for a client's website.
But the space between the text columns with images is bothering me a lot, how can I remove the white space?
Can y’all help me? I will leave here an example of how it is and how I want it to be.
 
5443.png
 
 
Thank you!
0 Likes
HardikDavra
Shopify Partner
1919 302 823

Please place this code at the end of assets -> theme.scss

#shopify-section-1618362133c88fb88c .page-width .grid {
    justify-content: center;
    display: flex;
   flex-wrap: wrap;
}
@media only screen and (min-width: 750px) {
#shopify-section-1618362133c88fb88c .page-width .grid .grid__item {
    width: 23.33333%;
}
}
Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
iamaidl
Tourist
10 0 0

Thanks for the quick response, but it didn't change anything!

0 Likes
HardikDavra
Shopify Partner
1919 302 823
#shopify-section-1618362133c88fb88c .grid {
    justify-content: center;
    display: flex;
   flex-wrap: wrap;
}
@media only screen and (min-width: 750px) {
#shopify-section-1618362133c88fb88c .grid  .grid__item {
    width: 23.33333%;
}
}
Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
iamaidl
Tourist
10 0 0

Still not working

0 Likes
HardikDavra
Shopify Partner
1919 302 823

I think I need to enter into your store to analyze the problem.

Would you please add me as staff member?

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
iamaidl
Tourist
10 0 0

glambeautyco.com /glambeautyco.myshopify.com

E-mail: dsgnsbyaidl@gmail.com

Password. Felismina12

Theme - "Debut"

0 Likes
Zipacna
Tourist
10 1 3

Did you fix the problem?

Try changing the grid item padding. I believe its currently set to 30px;

I set it to 10px below but it can be whatever you want. Make sure to do it for the media query too.

I.e.

 

 

.grid__item {
 padding-left: 10px;
}

 

 

0 Likes
iamaidl
Tourist
10 0 0

Hi,

 

@Zipacna, thank you! I managed to fix that problem I just made the columns bigger, bu t can you help woth something else?

I'm trying to make the columns bigger on the mobile version as well, how can I do that?

0 Likes
Zipacna
Tourist
10 1 3

Not sure exactly what you want but changing the value in the media query should adjust the size of the divs. So any screen below 729px would display as such:

@media only screen and (max-width: 749px)
.small--one-third {
    width: 50%;
}

 They're current at 33.3333% so that would be three in one column. 50% puts two, and 100% would be one per column.

0 Likes