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

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
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes

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
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
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

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
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
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

Success.

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
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Excursionist
45 0 2

Thanks for the help!

0 Likes
Shopify Staff
Shopify Staff
174 27 22

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