DEBUT THEME: Edit padding of Collection Grid Title

Solved
Highlighted
Tourist
13 0 3

Hello! I am editing the title overlay style on Debut's Collection Grid List. I then changed it by adding the following code in the bottom of my theme.css.liquid.

.collection-grid {

overflow:hidden !important;

}
.collection-grid .collection-grid-item__title {
 padding-top:50px;
  color: #104554;
   text-shadow:none;
  font-size: 15px;
  text-transform:uppercase;
  top:auto;
}

 

It looks great and perfect on a desktop browser, but has a problem with padding/margins on mobile.

How can I fix this or adjust this so that the titles are responsive and are fully shown? 

Thanks very much! 

Collection Grid on desktop browserCollection Grid on desktop browser

(Collection Grid on a Desktop Browser)

 

Collection Grid on mobile browserCollection Grid on mobile browser

(Collection Grid on a Mobile Browser)

 

For reference:

Webiste Link: https://emildific.com/

Password to enter is emildific

0 Likes
Highlighted

This is an accepted solution.

Hello stellaa,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.css.liquid

@media only screen and (max-width: 749px){
#shopify-section-1492096252560 .collection-grid-item {
    margin-bottom: 60px;
}
}
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
Tourist
13 0 3

This worked perfectly! Thank you very much!!! 

0 Likes
Highlighted
Shopify Partner
18 3 3

Hi, this is my humble suggestion, I can't edit your code, but I think if you put the h1 and the image in a div instead of using "before" on the image. it will be mobile-friendly 

<div class="grid">
          <div class="grid-item">
            <img src="your image" alt="">
            <h1>your title</h1>
          </div>
        </div>

you can do this in many ways this is my take. open to corrections 

0 Likes