Desktop vs. Mobile design issues?

Highlighted
Tourist
20 0 2

Hey everyone!

I'm having some trouble designing my store because when I make my desktop version how I'd like it to be, the mobile version gets really bad as a result.

For example, on my homepage, I have the text "GAMING MONITORS" ... when I make this text to the size I'd like it to be on a desktop, the mobile version becomes messed up, the two words overlap each other, I'm guessing because the font is just too large.

I edited this into the code, as the typography setting can't do it how i want it btw. :)

If anyone could shed some light on any of this or how to design desktop and mobile versions separately or something that would be amazing. 
 

Thanks in advance,

0 Likes
Shopify Partner
2536 31 561

Hi Sunil,  

this is usually done with media queries and the theme has rule to make the font smaller on smaller screens but it is overridden by the later rules.

Here is the SCSS

h1 {
  @include media-query($small) {
    font-size: rem(34);
    line-height: line-height(42, 34);
  }
  @include media-query($medium-up) {
    font-size: rem(60);
    line-height: line-height(72, 60);
  }
}

Which becomes this CSS:

@media only screen and (max-width: 749px) {
    h1,.h1 {
        font-size:3.4rem;
        line-height: 1.23529;
    }
}
@media only screen and (min-width: 750px) {
    h1,.h1 {
        font-size:6rem;
        line-height: 1.2;
    }
}

I'd suggest contacting support because for me it looks like a bug in the theme.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
0 Likes