Why do I get inconsistent spaces over and under buttons text depending on the type of device (desktop or...
I'm having quite an issue at the moment. I get different spaces over and under my buttons text which varies if I use a desktop/laptop or a mobile/tablet.
When I inspect a button on desktops and laptops (on any browser), I can see that there is some type of "white space" over and under the text, but it is not a problem because the spaces are even. (See the screenshot below, the text is vertically aligned correctly)
View on a desktop/laptop resized window (Google Chrome)
However, on mobiles, tablets and Macs (on any browser), there is only a "white space" under the text and not over it, so the text gets pushed towards the top of the button (see screenshot below).
View on a mobile (Samsung Galaxy S6, Google Chrome)
If I uncheck the Orbitron google font in the inspector, the default font seems to be aligned correctly.
Is there a work around to this font glitch (it seems to be one) ?
Here's this particular button's CSS code :
cursor: pointer;
font-family: 'Orbitron', sans-serif;
font-size: 2.1vw;
font-weight: 700;
text-transform: uppercase;
color: #0b0b0b;
background-color: white;
border-style: none;
padding: 0.2em 0;
width: 83%;
box-shadow: 0 0.2em 0.8em 0 #0b0b0b;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
-webkit-transition: 0.1s ease-in-out;
-moz-transition: 0.1s ease-in-out;
-o-transition: 0.1s ease-in-out;
transition: 0.1s ease-in-out;
Thanks in advance !
android html ios css asked Nov 13 '18 at 19:03
Jacob PJacob P
61
add a comment |
I'm having quite an issue at the moment. I get different spaces over and under my buttons text which varies if I use a desktop/laptop or a mobile/tablet.
When I inspect a button on desktops and laptops (on any browser), I can see that there is some type of "white space" over and under the text, but it is not a problem because the spaces are even. (See the screenshot below, the text is vertically aligned correctly)
View on a desktop/laptop resized window (Google Chrome)
However, on mobiles, tablets and Macs (on any browser), there is only a "white space" under the text and not over it, so the text gets pushed towards the top of the button (see screenshot below).
View on a mobile (Samsung Galaxy S6, Google Chrome)
If I uncheck the Orbitron google font in the inspector, the default font seems to be aligned correctly.
Is there a work around to this font glitch (it seems to be one) ?
Here's this particular button's CSS code :
cursor: pointer;
font-family: 'Orbitron', sans-serif;
font-size: 2.1vw;
font-weight: 700;
text-transform: uppercase;
color: #0b0b0b;
background-color: white;
border-style: none;
padding: 0.2em 0;
width: 83%;
box-shadow: 0 0.2em 0.8em 0 #0b0b0b;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
-webkit-transition: 0.1s ease-in-out;
-moz-transition: 0.1s ease-in-out;
-o-transition: 0.1s ease-in-out;
transition: 0.1s ease-in-out;
Thanks in advance !
android html ios css asked Nov 13 '18 at 19:03
Jacob PJacob P
61
Not sure all your inherited styles, but maybe look at yourline-height. Also, yourfont-sizeis based onvwwhich could affect other sizing elements because of the dynamic widths of the viewport.
– dward
Nov 13 '18 at 19:08
Thanks for your reply dward, I forgot to specify that I also experimented with an em based font-size and logical (and some unlogical) line-height values. Still no success unfortunately...
– Jacob P
Nov 13 '18 at 19:12
If you provide a fiddle with all CSS, that would be helpful for me or anyone else.
– dward
Nov 13 '18 at 19:29
I don't have a solution, but as a workaround you could try setting the line-height to 0 and then fine tuning the top and bottom padding.
– Mr Lister
Nov 13 '18 at 19:29
@dward There you go. If you test it on your laptop/desktop, the text will look perfectly centered vertically, but if you test it on your mobile/tablet or even a Mac, it will look off (closer from the top). jsfiddle.net/n0tyrua6/2
– Jacob P
Nov 13 '18 at 20:09
add a comment |
I'm having quite an issue at the moment. I get different spaces over and under my buttons text which varies if I use a desktop/laptop or a mobile/tablet.
When I inspect a button on desktops and laptops (on any browser), I can see that there is some type of "white space" over and under the text, but it is not a problem because the spaces are even. (See the screenshot below, the text is vertically aligned correctly)
View on a desktop/laptop resized window (Google Chrome)
However, on mobiles, tablets and Macs (on any browser), there is only a "white space" under the text and not over it, so the text gets pushed towards the top of the button (see screenshot below).
View on a mobile (Samsung Galaxy S6, Google Chrome)
If I uncheck the Orbitron google font in the inspector, the default font seems to be aligned correctly.
Is there a work around to this font glitch (it seems to be one) ?
Here's this particular button's CSS code :
cursor: pointer;
font-family: 'Orbitron', sans-serif;
font-size: 2.1vw;
font-weight: 700;
text-transform: uppercase;
color: #0b0b0b;
background-color: white;
border-style: none;
padding: 0.2em 0;
width: 83%;
box-shadow: 0 0.2em 0.8em 0 #0b0b0b;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
-webkit-transition: 0.1s ease-in-out;
-moz-transition: 0.1s ease-in-out;
-o-transition: 0.1s ease-in-out;
transition: 0.1s ease-in-out;
Thanks in advance !
android html ios css asked Nov 13 '18 at 19:03
Jacob PJacob P
61
I'm having quite an issue at the moment. I get different spaces over and under my buttons text which varies if I use a desktop/laptop or a mobile/tablet.
When I inspect a button on desktops and laptops (on any browser), I can see that there is some type of "white space" over and under the text, but it is not a problem because the spaces are even. (See the screenshot below, the text is vertically aligned correctly)
View on a desktop/laptop resized window (Google Chrome)
However, on mobiles, tablets and Macs (on any browser), there is only a "white space" under the text and not over it, so the text gets pushed towards the top of the button (see screenshot below).
View on a mobile (Samsung Galaxy S6, Google Chrome)
If I uncheck the Orbitron google font in the inspector, the default font seems to be aligned correctly.
Is there a work around to this font glitch (it seems to be one) ?
Here's this particular button's CSS code :
cursor: pointer;
font-family: 'Orbitron', sans-serif;
font-size: 2.1vw;
font-weight: 700;
text-transform: uppercase;
color: #0b0b0b;
background-color: white;
border-style: none;
padding: 0.2em 0;
width: 83%;
box-shadow: 0 0.2em 0.8em 0 #0b0b0b;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
-webkit-transition: 0.1s ease-in-out;
-moz-transition: 0.1s ease-in-out;
-o-transition: 0.1s ease-in-out;
transition: 0.1s ease-in-out;
Thanks in advance !
android html ios css android html ios css asked Nov 13 '18 at 19:03
Jacob PJacob P
61
asked Nov 13 '18 at 19:03
Jacob PJacob P
61
asked Nov 13 '18 at 19:03
Jacob PJacob P
61
asked Nov 13 '18 at 19:03
Jacob PJacob P
61
asked Nov 13 '18 at 19:03
Jacob PJacob P
61
61
Not sure all your inherited styles, but maybe look at yourline-height. Also, yourfont-sizeis based onvwwhich could affect other sizing elements because of the dynamic widths of the viewport.
– dward
Nov 13 '18 at 19:08
Thanks for your reply dward, I forgot to specify that I also experimented with an em based font-size and logical (and some unlogical) line-height values. Still no success unfortunately...
– Jacob P
Nov 13 '18 at 19:12
If you provide a fiddle with all CSS, that would be helpful for me or anyone else.
– dward
Nov 13 '18 at 19:29
I don't have a solution, but as a workaround you could try setting the line-height to 0 and then fine tuning the top and bottom padding.
– Mr Lister
Nov 13 '18 at 19:29
@dward There you go. If you test it on your laptop/desktop, the text will look perfectly centered vertically, but if you test it on your mobile/tablet or even a Mac, it will look off (closer from the top). jsfiddle.net/n0tyrua6/2
– Jacob P
Nov 13 '18 at 20:09
add a comment |
Not sure all your inherited styles, but maybe look at yourline-height. Also, yourfont-sizeis based onvwwhich could affect other sizing elements because of the dynamic widths of the viewport.
– dward
Nov 13 '18 at 19:08
Thanks for your reply dward, I forgot to specify that I also experimented with an em based font-size and logical (and some unlogical) line-height values. Still no success unfortunately...
– Jacob P
Nov 13 '18 at 19:12
If you provide a fiddle with all CSS, that would be helpful for me or anyone else.
– dward
Nov 13 '18 at 19:29
I don't have a solution, but as a workaround you could try setting the line-height to 0 and then fine tuning the top and bottom padding.
– Mr Lister
Nov 13 '18 at 19:29
@dward There you go. If you test it on your laptop/desktop, the text will look perfectly centered vertically, but if you test it on your mobile/tablet or even a Mac, it will look off (closer from the top). jsfiddle.net/n0tyrua6/2
– Jacob P
Nov 13 '18 at 20:09
Not sure all your inherited styles, but maybe look at your
line-height. Also, your font-size is based on vw which could affect other sizing elements because of the dynamic widths of the viewport.– dward
Nov 13 '18 at 19:08
Not sure all your inherited styles, but maybe look at your
line-height. Also, your font-size is based on vw which could affect other sizing elements because of the dynamic widths of the viewport.– dward
Nov 13 '18 at 19:08
Thanks for your reply dward, I forgot to specify that I also experimented with an em based font-size and logical (and some unlogical) line-height values. Still no success unfortunately...
– Jacob P
Nov 13 '18 at 19:12
Thanks for your reply dward, I forgot to specify that I also experimented with an em based font-size and logical (and some unlogical) line-height values. Still no success unfortunately...
– Jacob P
Nov 13 '18 at 19:12
If you provide a fiddle with all CSS, that would be helpful for me or anyone else.
– dward
Nov 13 '18 at 19:29
If you provide a fiddle with all CSS, that would be helpful for me or anyone else.
– dward
Nov 13 '18 at 19:29
I don't have a solution, but as a workaround you could try setting the line-height to 0 and then fine tuning the top and bottom padding.
– Mr Lister
Nov 13 '18 at 19:29
I don't have a solution, but as a workaround you could try setting the line-height to 0 and then fine tuning the top and bottom padding.
– Mr Lister
Nov 13 '18 at 19:29
@dward There you go. If you test it on your laptop/desktop, the text will look perfectly centered vertically, but if you test it on your mobile/tablet or even a Mac, it will look off (closer from the top). jsfiddle.net/n0tyrua6/2
– Jacob P
Nov 13 '18 at 20:09
@dward There you go. If you test it on your laptop/desktop, the text will look perfectly centered vertically, but if you test it on your mobile/tablet or even a Mac, it will look off (closer from the top). jsfiddle.net/n0tyrua6/2
– Jacob P
Nov 13 '18 at 20:09
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53287876%2fwhy-do-i-get-inconsistent-spaces-over-and-under-buttons-text-depending-on-the-ty%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53287876%2fwhy-do-i-get-inconsistent-spaces-over-and-under-buttons-text-depending-on-the-ty%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Not sure all your inherited styles, but maybe look at your
line-height. Also, yourfont-sizeis based onvwwhich could affect other sizing elements because of the dynamic widths of the viewport.– dward
Nov 13 '18 at 19:08
Thanks for your reply dward, I forgot to specify that I also experimented with an em based font-size and logical (and some unlogical) line-height values. Still no success unfortunately...
– Jacob P
Nov 13 '18 at 19:12
If you provide a fiddle with all CSS, that would be helpful for me or anyone else.
– dward
Nov 13 '18 at 19:29
I don't have a solution, but as a workaround you could try setting the line-height to 0 and then fine tuning the top and bottom padding.
– Mr Lister
Nov 13 '18 at 19:29
@dward There you go. If you test it on your laptop/desktop, the text will look perfectly centered vertically, but if you test it on your mobile/tablet or even a Mac, it will look off (closer from the top). jsfiddle.net/n0tyrua6/2
– Jacob P
Nov 13 '18 at 20:09