Improve responsiveness of debut theme across screen sizes

Highlighted
Excursionist
15 0 4

Hi

 

Hoping someone can help - I've had some theme customisation done and overall I am very happy however I'm dealing with two issues that we can't currently fix.

Issues #1

If you were to go onto a collections page, I have 4 large product cards per row - If you start reducing the width of the window, it remains at 4 product cards per row but shrinks them very small and then it jumps to just showing 2 product cards which allows for larger images. What I am trying to achieve is rather than it going from 4 product cards per row straight to 2, introduce an additional step where it shows just 3 cards per row to improve the transition but also to improve the look on tablets etc where 4 is too many but 2 is too few.

Hopefully this GIF helps demonstrate my issue.

Screen-Recording-2020-09-20-at-1.gif

Issues #2

When I click the hero image on the product page it gets a blue border (See pic below). How can I get rid of this?

Screenshot 2020-09-20 at 10.40.36.png

 

Thanks!

Josh

0 Likes
Highlighted
Shopify Partner
439 44 65

Hi @jmr93 ,

Please share your store URL so I can take a closer look and share the solution here.

Thanks

Umair Abbas

If helpful, please Like and Accept Solution
Want to hire me?
Contact Me At
WhatsApp or email me at umairabbascs@gamil.com
Hire me for 1) Theme coding 2) PSD to Shopify 3) Store optimization 4) SEO 5) Store setup 6) and more!
0 Likes
Highlighted
Excursionist
15 0 4
0 Likes
Highlighted
Shopify Partner
439 44 65

Hi @jmr93 ,

Add the following code to your theme.scss.liquid file for the border on image click

 

.product-single__media-wrapper {
outline: none !important;
}

 

 

For three columns in a row add the following code to the same file

 

@media only screen and (max-width: 750px) and (min-width: 600px) {
 .medium-up--one-quarter {
    width: 33% !important;
 }
}

 

 

Let me know if you need help with anything else.

Umair Abbas

If helpful, please Like and Accept Solution
Want to hire me?
Contact Me At
WhatsApp or email me at umairabbascs@gamil.com
Hire me for 1) Theme coding 2) PSD to Shopify 3) Store optimization 4) SEO 5) Store setup 6) and more!
0 Likes
Highlighted
Excursionist
15 0 4

Hi

@UmairA 

Thanks for this - The 1st bit of code only works for the main hero image. Once the user selects a new image from a thumbnails which then get shown as the main image, the blue box then comes up again

 

The 2nd piece of code completely broke the website...

Screenshot 2020-09-20 at 11.59.02.png

An other ideas?

0 Likes
Highlighted
Shopify Partner
439 44 65

Hi @jmr93 ,

I've edited both the codes. Replace both of the codes.

If helpful, please Like and Accept Solution
Want to hire me?
Contact Me At
WhatsApp or email me at umairabbascs@gamil.com
Hire me for 1) Theme coding 2) PSD to Shopify 3) Store optimization 4) SEO 5) Store setup 6) and more!
0 Likes
Highlighted
Excursionist
15 0 4

@UmairA 

 

First bit of code is now working well - The second is not working quite right yet, it makes the space for it to become 3 products but only shows 2, see below.

Screenshot 2020-09-20 at 12.32.28.png

 

0 Likes
Highlighted
Shopify Partner
439 44 65

@jmr93 ,

It's great that the first one is working well. The problem with the second one happened because the theme didn't adjust with new number of columns, to fix this, I need to look into your code and adjust some code before it works well. Ping me if you need my help. Thanks

Umair Abbas

If helpful, please Like and Accept Solution
Want to hire me?
Contact Me At
WhatsApp or email me at umairabbascs@gamil.com
Hire me for 1) Theme coding 2) PSD to Shopify 3) Store optimization 4) SEO 5) Store setup 6) and more!
0 Likes
Highlighted
Shopify Partner
439 44 65

@jmr93 ,

Can you please message me via WhatsApp I can't reply via DM. Thanks

If helpful, please Like and Accept Solution
Want to hire me?
Contact Me At
WhatsApp or email me at umairabbascs@gamil.com
Hire me for 1) Theme coding 2) PSD to Shopify 3) Store optimization 4) SEO 5) Store setup 6) and more!
0 Likes
Highlighted
Excursionist
15 0 4

@UmairA  Message sent via WhatsApp but only getting one tick...

0 Likes