Jump to content

Padding not scaling correctly


DarkxPunk

Recommended Posts

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 by DarkxPunk
Link to comment
Share on other sites

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

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

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

Okay so I finally got a chance to play around with it again, tried px, rem, %, vw, and everything made it worst :facepalm: . 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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...