DarkxPunk Posted January 15, 2017 Share Posted January 15, 2017 (edited) Hey there, So I am playing around with different ways to display a logo and using padding to move around text. Everything looks great, except when I try and scale down the page (zoom out). At about 80% in either Safari or Chrome the padding seem to not scale down... I can scale up and keep everything correct... Note I am using normalize.css and thats it. CSS html {font-family: 'tex gyre heros', helvetica, arial, sans-serif; font-weight: normal; font-style: normal; font-size: 10px;} a,a:link,a:visited,a:hover {text-decoration: none; color: inherit;} .logo { padding: 10em 10em 0 0; background: url(../images/logo-print-label.svg) left center no-repeat; display: inline-block; vertical-align: bottom; } .logo.main { padding: 1.2em 0 2.1em 12em; } .logo.main .logotype, .logotype.block { display: block; } .logotype { font-weight: bold; white-space: nowrap; } .logotype.title::before { content: "Title"; font-size: 4em; line-height: 1.1; color: #646469; } .logotype.subtitle::after { content: "Subtitle"; padding: 0 0 0 0.078em; font-size: 2.1em; line-height: 1.1; color: #000000; } HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="Description"> <base href=""> <title>Title</title> <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" charset="utf-8"/> <link rel="stylesheet" href="css/fonts.css" type="text/css" media="screen" charset="utf-8"/> <link rel="stylesheet" href="css/default.css" type="text/css" media="screen" charset="utf-8"/> </head> <body> <header> <a class="logo main" href=""> <span class="logotype title"></span> <span class="logotype subtitle"></span> </a> </header> <section> </section> <footer></footer> </body> </html> Thanks for any ideas as to why this is happening and/or how to get around it! Edited January 15, 2017 by DarkxPunk Link to comment Share on other sites More sharing options...
dsonesuk Posted January 15, 2017 Share Posted January 15, 2017 I think you will find some browsers will roundup or rounddown such fractional units. Also the other problem/s I see are 1) no viewport meta tag for scaling for high density devices 2) using em instead of percentages, em is sizes to current font-size set used for current element (10px I believe). 3) using display: inline-block; results in a space of current font-size appearing to right. So with these I doubt if it will scale correctly anyway. Link to comment Share on other sites More sharing options...
DarkxPunk Posted January 15, 2017 Author Share Posted January 15, 2017 1) no viewport meta tag for scaling for high density devices 2) using em instead of percentages, em is sizes to current font-size set used for current element (10px I believe). 3) using display: inline-block; results in a space of current font-size appearing to right 1) Yes I should add that, but do you think that will actually help with the browser and its math? 2) Doesnt WebKit scale by modifying the root font size? Thus shouldent everything scale evenly? Because what is strange is the padding on the top and bottom seems to scale but not the left. I guess I can try percentages but gonna be a pain. 3) I am not sure what this relates to? Keep in mind it's the left padding that won't scale down. Thanks for the thoughts and ideas. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 15, 2017 Share Posted January 15, 2017 1) Yes! because pixel density goes from 1px to 1.2 or whatever it is now. 2) A 10px font remains 10px font, 1em is 10px, 1.5em 15px, it remain that size therefore it wont scale down unless use a 'vw' unit where font will scale to 'vw' viewport width and adjust similar to a percentages unit. Width is more crucial to get math right, if width math is wrong stacking will occur, height will adjust without any consequences. 3) IF you have addition space added to total width of every element using display: inline-block; the math is affected and therefore width will not be correct causing stacking. Link to comment Share on other sites More sharing options...
DarkxPunk Posted January 16, 2017 Author Share Posted January 16, 2017 Okay so I finally got a chance to play around with it again, tried px, rem, %, vw, and everything made it worst . Yes I know I am grasping at straws but I still don't understand what is going on... First off I understand 1em = 10px, obviously because I set it that way. When I scale up a page or scale down a page (Command + / Command -) in FF or IE it scales as expected up and down, my understanding from that is it must be using page scaling rather than text scaling. Do I have that backwards? However Webkit browsers Safari or Chrome use text scaling, everything seems to increase in scale correctly but not decrease in scale properly. I am aware I am repeating myself. However if Webkit uses text scaling then shouldn't it be increasing the root font size aka changing 10px to Xpx based on my scale percentage? If I change the root font size manually it scales up and down no problem... This is NOT a viewport issues... This is not a fluid design issue... This is an issue with page scaling/zooming. I hope this better explains and clarifies what the solution should be... Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now