[Debut] Alignment of elements on mobile website

Solved
rbelle
Tourist
31 0 14

Hi all, there are some alignment issues on my mobile website that I can't resolve.

I've implemented headroom.js for a sticky header and it shrinks upon scrolling on mobile but works fine on desktop. Does anyone know why?

mobilealignment1.png

Also, how do I align the product count to the centre of the filter toolbar?

Not too good at it, but here's my current CSS code: 

@media only screen and (min-width: 749px){
  .filters-toolbar__product-count{
    justify-content: center; 
  }
}

Greatly appreciate any input!

0 Likes
dmwwebartisan
Shopify Partner
5827 1335 1711

@rbelle 

 Please share your webshop URL and password .

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
rbelle
Tourist
31 0 14

Hi! 

store: https://rachel-belle-singapore.myshopify.com/
password: rachbelle

Thank you.

dmwwebartisan
Shopify Partner
5827 1335 1711

This is an accepted solution.

@rbelle 

Please add the following code at the bottom of your assets/theme.css file.

@media only screen and (max-width: 749px){
.site-header {width: 100% !important;}
.filters-toolbar--has-filter .filters-toolbar__item--count {text-align: center !important;}
}

Hope this works.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
rbelle
Tourist
31 0 14

Hi there,

That worked perfectly. Thank you so much!

0 Likes