Brooklyn Theme Collection Page for Mobile Browser

Solved
Tourist
14 0 0

The entire site is nice on computer but some of the text has overrun on the mobile version.

 

I'll need to increase the top margin of the collection title on this page - https://www.hagargifts.com/collections/gifts-that-protect 

 

Screenshot 2019-11-26 at 7.19.46 PM.png

 

The collection titles in the list of collections are over-running and the images should be displayed in a square-size image. This is what it looks like on mobile display - https://www.hagargifts.com/collections 

 

Screenshot 2019-11-26 at 7.20.09 PM.png

 

Any help will be appreciated please. These changes are only meant for mobile browser. It currently works fine on the desktop browser. Thank you.

0 Likes

Success.

Hello  

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

@media only screen and (max-width: 749px){
header.section-header.text-center {
    margin-top: 68px;
}
}

Add below css for second

@media screen and (max-width: 590px)
{
.collection-collage__item.one-half {
    height: 250px!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
1 Like
Shopify Expert
665 170 199

Hi, @camylow ,

This is Evita from On The Map.

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file.

 

@media only screen and (max-width: 749px){
#shopify-section-list-collections-template header {
margin-top: 5rem;
}
} @media screen and (max-width: 590px) { .collection-collage__item.large--one-third { height: 280px!important; } }

 

Best, Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
Tourist
14 0 0

Thank you @oscprofessional ! The code worked and fixed the collection title space for mobile.

 

Would you also be able to help with the text display for the collection titles on mobile browser for this page - https://www.hagargifts.com/collections 

 

It currently comes up like this -

Screenshot 2019-11-26 at 7.40.35 PM.png

 

I hope to show more of the collection thumbnail on mobile browser and reduce the text size of the collection title and the text that states "Items Starting from $$$". Thank you so much for your kind help.

0 Likes

Hello 
Also add this css at end of same file to display header properly:

@media only screen and (max-width: 749px){
header.site-header {
    background-color: gray;
}
}

You can change by other color in place of gray.

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 

I have added another css on first post please check and add:

@media screen and (max-width: 590px)
{
.collection-collage__item.one-half {
    height: 250px!important;
}
}

This one on same file.

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
Tourist
14 0 0

Thanks so much Evita @OTM ! Appreciate your help.

0 Likes
Tourist
14 0 0

Just saw this after I sent the reply. Thanks @oscprofessional .

 

Is there any way to vertical align the collection title in the thumbnail to the centre? :)

0 Likes

Add this css at the bottom of same file:

@media only screen and (max-width: 749px){
header.site-header {
  .collection-grid__item-title--wrapper {
    padding-bottom: 25%!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