Issue with huge product & collection cards on narrow screens/ Site responsiveness

[fm_vlv]

Hi there,

we've been having some trouble with the size of product & collection cards as soon as the screen width becomes about smaller than the width of a horizontally rotated iPad. They become huge & completely unusable. We use the Refresh-Theme. Anyone knows how to fix this issue? Thanks in advance!

www.vivalavida.life

[PaulNewton · Accepted solution]

Hi @fm_vlv 👋 The sanest thing to to is check a new install or new version of the theme to see if the issue is pre-existing.

‌‌‌‌⚠💣 Always backup themes before changing files 💣⚠‌

The width problem seems related to these lines in base.css if you comment them out you will probably get the wanted desktop/mobile behavior

/* base.css line ~1081 */
@media screen and (min-width: 750px) and (max-width: 989px) {
  .slider--tablet.grid--peek .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }
}

and 

/* base.css line~965 */
@media screen and (max-width: 989px) {
  .grid--1-col-tablet-down .grid__item {
    width: 100%;
    max-width: 100%;
  }
}

Beyond that would take time digging and fixing.

If you need customization or further consulting then contact me for services
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

[fm_vlv]

It fixed the issue. Thank you very much!