Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

CSS Media Query not displaying correctly on mobile device


Spence500

Question

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

Screen Shot 2021-03-05 at 2.28.01 PM.png

Screen Shot 2021-03-05 at 2.28.17 PM.png

IMG_0097.jpg

Edited by Spence500
fixed a couple of things
Link to post
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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. @medi

That worked great, thank you so much my friend!

Posted Images

5 answers to this question

Recommended Posts

  • 0
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.

Link to post
  • 0

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

1414189071_ScreenShot2021-03-18at8_53_17PM.png.264c8cf7fa965b9c1b825bd7736d5aad.png

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

145626911_ScreenShot2021-03-18at8_55_49PM.png.abc1dae4a287c6bf86d23fe17aa27244.png

@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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
  • 0
On 3/19/2021 at 12:04 AM, creedon said:

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

1414189071_ScreenShot2021-03-18at8_53_17PM.png.264c8cf7fa965b9c1b825bd7736d5aad.png

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

145626911_ScreenShot2021-03-18at8_55_49PM.png.abc1dae4a287c6bf86d23fe17aa27244.png


@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!

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...