Adjusting height of collection list on home page and adjusting height of text overlay for collection

Solved
Highlighted
Excursionist
45 0 2

Hello everyone! 

 

I am looking for troubleshooters to help solve my problems.

 

1.  I would like to move my collection list higher to reduce the empty space. 

 

2A. I would like to move the text overlay for each collection to the bottom of the picture and make it aligned with the other text from each collection.

 

2B. I would like to change the text overlay color to black but keep the text overlay color on my slideshow white.

 

Website: www.petgrotto.com

 

I have attached the pictures below. Any help would be greatly appreciated!

 

1.jpg2.jpg

0 Likes
Highlighted

Hello 

1. Add this css at bottom of
Online Store-> Themes -> Edit code->Assets->theme.scss.liquid

@media only screen and (min-width: 750px)
{
.index-section {
 padding-top: 0px!important;
 padding-bottom: 0px!important; 
}
}
.section-header.text-center {
    padding-top: 0px; 
}
@media only screen and (min-width: 750px)
{
.section-header {
     margin-bottom: 0px!important; 
}
}

 

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted

Hello 

2. (A,B) Add this css at bottom of
Online Store-> Themes -> Edit code->Assets->theme.scss.liquid

.collection-grid-item__title.h3 {
    padding-top: 100%!important;
color:black; } 

 

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
Highlighted
Excursionist
45 0 2

Hello thanks for the code!

 

However, another sidebar is created to the right after I insert the code. Is there anyway to remove it?

 

11.PNG

0 Likes
Highlighted

Hello 

Add this css at bottom of
Online Store-> Themes -> Edit code->Assets->theme.scss.liquid

#shopify-section-1575894951414 .collection-grid {
    overflow: hidden!important;
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Excursionist
45 0 2

Thanks a lot! It worked well. Is there a way to resize the text for each collection?


@oscprofessional wrote:

Hello 

Add this css at bottom of
Online Store-> Themes -> Edit code->Assets->theme.scss.liquid

#shopify-section-1575894951414 .collection-grid {
    overflow: hidden!important;
}

 

0 Likes
Highlighted

This is an accepted solution.

Hello 

To resize text add this css at end of same file:

.collection-grid-item__title.h3 {
    font-size: 25px!important;
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Excursionist
45 0 2

Thanks for the help!

0 Likes
Highlighted
Shopify Staff
Shopify Staff
694 63 88

Hello, @Konthy .

 

Elias here with Shopify Support. Thank you for reaching out.

 

It looks like @oscprofessional was able to offer amazing custom coding solutions for your inquiries. If you still need further help, our Theme Support team might be able to help explore some of these customizations. We have a list to what our Theme Support can or cannot support right on our design policy

 

If you have any other questions about theme customizations, don’t hesitate to let me know!

Elias | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Tourist
11 0 4

Hi, I had the same problem and was able to use these instructions and code to move my text down below the collection photos. However the text has a shading around it,  Is there a code I can add that romoves the shading and makes the letters crisp?

Thanx, Linda

0 Likes