css - Stop Resizing Text in Mobile -


folks,

so trying eliminate auto-text resizing in mobile browsers website (boxangeles.com) makes layout horrible, imo.

it seems sections have issue referencing css --

#newpost { background-color: white;  border: 1px solid #ec0000; border-radius: 7px; font-size: 20px; line-height: 115%; margin-bottom: 15px; padding: 15px; width: 690px; margin: 0px 15px 15px 0px;}  #newpost img { border: 1px solid #ec0000; margin-left: auto; margin-right: auto;}  #newpost a:hover { text-decoration: underline;} 

and text sections work fine using css --

.post-block { background-color: white; border: 1px solid #ec0000; border-radius: 7px; font-size: 20px; float: left; height: 165px; line-height: 115%; margin: 0px 15px 15px 0px; padding: 10px; width: 700px;}  p.post-block a:hover { text-decoration: underline;}  .post-block a:hover { text-decoration: underline;}  .post-block .thumb { background: url(images/thumbbg.jpg) no-repeat; float: left; height: 150px; padding: 4px; margin: 2px 7px 2px 2px; width: 150px;} 

i found --

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0">

on stackoverflow, stopped text resizing, in #newpost sections, normal size text takes half usual space (on left side) ...

any appreciated. thanks.

take @ link: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

you should use media queries can assign different css code based on screen size. here basic setup:

/* put original css code here */  @media(min-device-width: 320px) , (max-device-width: 480px) {     /* put mobile code here */ } 

Comments

Popular posts from this blog

OpenCV OpenCL: Convert Mat to Bitmap in JNI Layer for Android -

android - org.xmlpull.v1.XmlPullParserException: expected: START_TAG {http://schemas.xmlsoap.org/soap/envelope/}Envelope -

python - How to remove the Xframe Options header in django? -