CSS Media Query not displaying correctly on mobile device

Site URL: https://lmtecdigitalsolutions.com

Hey there, 

I'm having issues with a Custom CSS media query for a mobile breakpoint. I've coded it all correctly (at least I think), and I'm seeing what I edited correctly in the mobile view in 7.1 on my desktop, but as soon as I go check it out on my actual mobile device that I formatted it for, it isn't displaying correctly. My viewport on my Iphone 11 is 414 x 896, I set my max-width to 640px. I will attach the referenced screen shots to what I'm referring too. You'll see the correct spacing of the text "Supporting our clients every step of the way" that is displayed when viewing on my desktop monitor in the mobile view. Then you'll see an actual screenshot from my Iphone that shows the same text but the line height is much closer together, which I do not like. Any suggestions on this would be greatly appreciated, thank you! 

(After looking at this through, do I have to target the whole block level div of the image and everything in it as well? Also, I forgot to document that the "media" is targeted for mobile in the actual CSS code)

-Spence

Hi. You can post code here? We can check easier

On 3/7/2021 at 2:12 AM, tuanphan said:

Hi. You can post code here? We can check easier

Hey Tuan! The code is attached as a screenshot at the beginning of this post.

Hi. Have you solved it yet?

I can see the squished together text on mobile size in Chrome.

I don't see a problem with the basic structure of your code. I made a small change here locally and that helped.

@media only screen and ( max-width : 640px ) {

  #block-yui_3_17_2_1_1612208139198_4223 h1 {
  
    line-height : 1.232;

    }
  }

Let us know if that helps.

On 3/19/2021 at 12:04 AM, creedon said:

I can see the squished together text on mobile size in Chrome.

I don't see a problem with the basic structure of your code. I made a small change here locally and that helped.

@media only screen and ( max-width : 640px ) {

  #block-yui_3_17_2_1_1612208139198_4223 h1 {
  
    line-height : 1.232;

    }
  }

Let us know if that helps.

That worked great, thank you so much my friend!