I found the cause, it is text-align: justify; (which i had applied to p). Why does it do this and is there a workaround? – NullBy7e just now edit
p {
padding-top: 5px;
padding-bottom: 5px;
hyphens: auto;
text-align: justify;
text-justify: newspaper;
}
--
Here is the page link: http://vizionx.eu/
On desktop this views fine but when you view this on android with Firefox the middle latin text gets random word-spacing, that's what it looks like.
I just want that all the margins, padding, font sizes, spacing etc is the same on mobile as on the desktop, there isn't exactly a page anywhere on the internet that explains how to achieve this.
CSS
body {
font-weight:normal;
font-family:times new roman, times, serif;
font-size: 1em;
-webkit-text-size-adjust: 1em; /* fix for opera */
word-spacing: 0em;
letter-spacing: 0em;
}
#content { /* contains the latin text */
font-family: Karla; /* imported with google fonts */
font-size: 1.2em; /* maybe this is wrong? */
padding: 10px 10px 10px 10px;
color: rgb(98,125,77);
}
Also just a misc question, if any of you are willing to answer it.
The empty white boxes on the page, the borders of them are invisible on mobile, they become visible when zooming in.....odd.
Related
Here's a sample page:
html,
body {
margin: 0;
padding: 0;
}
header {
padding: 16px 0;
text-align: center;
background: black;
}
header img {
width: 234px;
height: 222px;
vertical-align: bottom;
}
li {
background: url('images/WhatsApp.png') no-repeat right;
padding: 30px 50px;
list-style: none;
}
a {
font: bold 32px Calibri;
color: black;
text-underline-position: under;
}
<html dir="rtl" lang="fa">
<header>
<img src="logo.png" alt="Logo">
</header>
<main>
<ul>
<li>گروه اطّلاعرسانی</li>
<li>ارسال تکالیف</li>
</ul>
</main>
It doesn't look good on Android Chrome, i.e. the underline is cut and crosses some descenders.
Here's the final result, which I tested on the latest version of Chrome, 93:
I see that the text is cut on the letters that tend to intersect with the underline; so you can increase the offset between the line and the text using text-underline-offset property in CSS:
text-underline-offset = 2px
/* or */
text-underline-offset: 0.1em;
If you used the pixel version, you probably need to manipulate the 2px a bit, but make sure to test that on different devices.
Make sure that if you increase this offset much, then you'd get them intersected with the text in case you have a multi-lined text. I recommend to use it on a single line of text, and that is already your case.
This issue also might be solved if you change the font type, as the height of fonts differs from one typeface to another, so you can check this as well.
For further research check the documentation, and this SO question.
I've been trying to center a number inside of a circle, and I just can't quite get it. Every time I think I have it, it seems like it on some platform it doesn't work (whether it's an apple phone, an android browser, Safari on Mac OS X, or Chrome / Firefox on Windows) there's a 1-2 pixel difference.
Here's the code:
.unread-replies {
display: flex;
justify-content: center;
text-align: center;
align-items: center;
background-color: #F24648;
border-radius: 50%;
width: 25px;
height: 25px;
font-weight: 500;
color: white;
font-size: 17px;
border: 1px solid #00000066;
}
* {
box-sizing: inherit;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important;
}
<div class="unread-replies">1</div>
Fiddle copy here: https://jsfiddle.net/3vr2mkfb/3/
In this case it seems like it's not vertically centered on Chrome in my desktop browser, but it is vertically centered on Chrome on my Android phone. Why the discrepancy?
If I try small hacks like padding-bottom: 2px; then it inevitably causes some problem on some other platform. I think I instead need the actual fix, but I don't know if there is one?
add some line-height with the same value as the font-size and see if it fixe anything.
Use Viewport Units like vw for width and vh for height instead of px and % because it will help you make your webpage/website responsive.
It will surely solve your issue but if it doesn't let me know in the coments I will try my best to help you.
Before anyone thinks this is a simple question or is a possible duplicate, please read the full post.
I'm developing an Android application and have implemented a WebView to act as part of the application. The WebView shows content from a website which is made with bootstrap and is mobile friendly. However, the CSS messes up here and there and as a result, the entire application looks odd and elements seem to be 'out of place'.
For example, I place a box and some text inside a container and place it specifically using CSS margins. Like below:
.testcontainer {
border: 1px solid red;
height: 50px
width: 100%;
}
.testcontainer .box {
height: 50px;
width: 50px;
background-color: blue;
display: inline-block;
vertical-align: top;
}
.testcontainer .text {
font-size: 16px;
display: inline-block;
vertical-align: top;
border: 1px solid blue;
}
<div class="testcontainer">
<div class="box"></div>
<div class="text">Testing</div>
</div>
Now all is good on a MacBook Safari and Opera browser and the text's border is pixel perfect and is aligned with the top of the blue box etc. However, on the WebView inside the application, the text is around 2px off and in some cases, 5px and so on. Why? I've tried to use em instead of px for font-size but the same issue occurs. What am I missing?
I'm developing a website that has custom lightboxes. When the user activates a lightbox, there is a gray translucent div that comes behind the active lightbox. I've noticed on tablets (ios and android) there is about a 10 pixel margin on the right side where a scrollbar would be. I've tried the following CSS and it hasn't removed it:
#media (max-width: 767px) {
#gray_out {
margin-left: -20px;
margin-right: -20px;
}
}
html, body {
margin:0;
padding:0;
}
div, p, a, li, td { -webkit-text-size-adjust:none; }
Here is what it looks like on a desktop:
Here is what it looks like on a tablet:
Notice the bright yellow sliver.
The code for the div that provides the graying:
z-index: 99999;
background-color: rgba(0, 0, 0, 0.74902);
left: 0px;
right: 0px;
margin: 0px;
width: 802px;
height: 2034px;
position: absolute;
top: -0.00006103515625px;
The top value is generated with jQuery. Any advice would be greatly appreciated.
I can't provide a direct link to the site, and for this situation jsFiddle can't help because of the nature of the issue. Bear with me.
It seems obvious in hindsight, maybe there is a more elegant solution but eventually this is what I came up with:
#media (max-width: 1000px) {
#gray_out {
margin-left: -20px ;
margin-right: -20px;
width: 105%;
}
#home_footer, #home_header, #home_row_1, #home_row_2, #home_row_3 {
margin-left: -15px;
margin-right: -15px;
width: 102%;
}
}
Removing padding/margins wouldn't work, and that 10px sliver was actually interfering with more than the gray div, so I just made everything that much wider on mobile devices. I've tested it on a couple different versions of the iPad and a handful of Android devices on browserstack and it seems to be working well enough.
I am building a menu for my site to target mobile devices, and my default Android browser is acting very funny. I've stripped everything down to bare minimum, and as basic as i could to test everything out.
I am using jquery's .Toggle function to have my menu appear and disappear. It functions perfectly. Just as intended in all browsers. I went to test it on my mobile device and it worked / looked perfect in Firefox. Then I went to test it in the default Android browser. To my dismay there was a problem.
When you click the div that toggles the menu to make it appear the div moves to the left leaving a gap on the right side of the menu. What is funny is that I have a div inside of the menu container that retains its 100% width, and extends to the far right side of the screen. The css for the div inside of the menu div has practically the exact same css. So I am so confused as to why it is retaining it's 100% width but not my div that appears when toggled. Does anyone have any ideas? Below is a screen shot of the issue and my code.
html
<div id="mobilemenu">
<ul>
<li>Home</li>
<li>Random</li>
<li>Submit</li>
</ul>
<div id="mobilemenu-catdrop">
Categories
</div>
</div>
<script>
var flip = 0;
$("#click").click(function () {
$("#mobilemenu").toggle( flip++ % 2 == 0 );
});
</script>
css
/* header */
header {
background: #2e97de;
width: 100%;
height: 45px;
border-bottom: #287eb9 1px solid;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
display: block;
}
/* mobile menu */
#mobilemenu {
border-top: #8dc8f2 1px solid;
width: 100%;
background: #2e97de;
display: none;
}
#mobilemenu ul {
}
#mobilemenu li {
display: block;
}
#mobilemenu li a {
padding: 10px;
color: #95d3ff;
display: block;
text-decoration: none;
}
#mobilemenu-catdrop {
width: 100%;
background: #1e6291;
color: #FFF;
padding: 10px;
display: block;
}
This is happening because the div #mobilemenu-catdrop is actually beyond the width of #mobilemenu since you're using padding with 100% width. use the border-box you're using on the header with that div instead:
#mobilemenu-catdrop {
width: 100%;
background: #1e6291;
color: #FFF;
padding: 10px;
display: block;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}