Collections grid titles on mobile cutting off - Debut theme

Solved
Highlighted
New Member
2 0 0

Hi there, 

I'm having two issues with formatting on mobile.  I'm using debut theme and my site is https://www.eversosalty.co.uk/ 

1)  Collections grid -  I am using the debut theme and I was able to edit the code to move the titles below the images but some of the titles are two lines and are being cut off.  I have tried codes in similar posts but nothing is working for me.

2) Main image slider - the header title is really large but I cannot figure out how to change it

Thanks in advance.

A

Screenshot_20201111-105255.pngScreenshot_20201111-105347.png

0 Likes
Highlighted

This is an accepted solution.

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

@media only screen and (max-width: 749px){
#shopify-section-1602004048472 li.grid__item.small--one-half.medium-up--one-quarter {
    margin-bottom: 30px;
}
}
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
New Member
2 0 0

That's brilliant, thank you so much.  Are you able to let me know how to change the font size on the slider header on mobile as well? 

Best, 

A

0 Likes
Highlighted

This is an accepted solution.

Add this css

@media only screen and (max-width: 749px){
h2.h1.mega-title.slideshow__title.slideshow__title--mobile {
    font-size: 1.7em;
}
}


Note: Please change font size as per your requirement

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
18 0 3

Hey oscprofessional, I have been looking for help on this forum for a while and I have not had any luck. I was wondering if you could help me aswell. I need help fixing my homepage of my website, the image with text overlay box is the main image on my website homepage. When I enter in my image that is 2048x1024, it looks perfect on my desktop, but when my friend goes to the website on his laptop the image gets cropped and the words I edited in are not on his screen. The same goes for mobile and I would like it to be proportional for all three and show the same image whole on any screen size. Thanks for the help! I have been working on this for hours and I really appreciate it.

0 Likes