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
Post a Comment