Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I am having an css issue on my site. The font size is not consistent across all pages. The difference is one version of bigger font size and one version of a regular small font size. The small font size is the one I prefer. If the page is showing the content in big font, it will change it back to a smaller one after reload the page for a couple of times, it also changes back to the smaller one right away if you right click and select inspect element. Thus, I am not sure how can I ping point the issue.
Here are the screenshots, one with the big font and one with the small font, and again the small font is the one I prefer.
body { font-size: 1.6rem;} might be your issue... you can axe that from your style.css and it should be more consistent. It looks like chrome might not like rem on the body as can be seen in the linked question
removing/changing the bad line from the following class definition in style.css should fix you up
body, button, input, select, textarea {
color: #404040;
font-family: sans-serif;
font-size: 16px;
font-size: 1.6rem;
line-height: 1.5;
}
Similar SO question
Text + good links from answer on other question:
"This seems to be a Chrome bug; see Issue 319623: Rendering issue when using % + REMs in CSS, and/or a partly-merged duplicate: Issue 320754: font-size does not inherit if html has a font-size in percentage, and body in rem"
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 months ago.
Improve this question
Requirement: I need to create a 'banner' component that will be have a text and an image.
Design definitions for heading:
Desktop
Mobile
h1: 50px
h1: 30px
h2: 42px
h2: 26px
...
...
Problem: The text for the banner component on desktop version is labeled as <h1> and has the size of 50px but on the mobile is labeled as <h2> and has the size of 26px
Questions:
What is the best practice in this case?
Should the heading tag be consistent on mobile and desktop for the same component?
Are there any problems if the heading is different for mobile / desktop ? (SEO, best practices, anything really...)
I know I can easily overwrite the <h1> font size with CSS, but I am wondering if there is a different approach to this and if the design is 'wrong' and has to be changed.
I tried googling this issue but I could not find anything for this specific case.
Should the heading tag be consistent on mobile and desktop for the same component?
It depends on the rest of the page, but (in terms of which element you are using) almost certainly yes.
An h1 represents the main heading for the page. An h2 represents a subheading.
I doubt that viewing the page on a mobile device changes the meaning of the text from "heading" to "subheading".
Your design might call for the main heading to be a smaller size on a different screen size, but that's a reason to change the size of h1 elements using a media query, not a reason to change the element.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 4 years ago.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Improve this question
When I do something like:
#caterpillar {
color: white;
}
<div id="caterpillar">
sample text
</div>
I get my white font and am happy. BUT for some reason, JUST CHANGING THE NAME OF THE DIV TAG:
#centipede {
color: white;
}
<div id="centipede">
sample text
</div>
In the same HTML template with the same CSS does NOT work and inspecting in chrome shows that it defaults to:
element.style {
}
user agent stylesheet
div {
display: block;
}
and I do not get the desired effect. What could be happening? Why does it like one id name, but not the other ?
Neither of your examples work. white is not an acceptable value for font (well, it is if you are trying to use a font family with the name "white").
If you want to change the foreground colour, use the color property.
You can't set the font color with the font shorthand, you need to set it with color: white.
So the fact that it "does not work" in the second example is actually the expected behavior. The reason why it works with #caterpillar is propably because the color is inherited from a parent element, or there are some other CSS declarations for #caterpillar elsewhere, which may apply.
Take a look at the example below, it works with both ID's and the correct CSS
#centipede{
color: red;
}
#caterpillar {
color: green;
}
<div id="caterpillar">
sample text
</div>
<div id="centipede">
sample text
</div>
What the font shorthand is actually for
Take a quick look at the docs at MDN, the font shorthand can be used to combine the following CSS properties:
mandatory
font-size
font-family
optional
font-style
font-variant
font-weight
line-height
Try clearing your browser cache to make sure your page is loading the latest version of it.
You could also try checking the sources in google developer console to make sure the latest is being loaded
Use color property instead of font
#caterpillar {
color: white;
}
#centipede{
color: white;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
my fonts in mobile is so bigger than desktop! (iphone 5c). I'm test EM font size and nothing... and others pages H2, h4... some diferents sizes in mobile but my css is same...
I used reset.css and i never can this problem...
sorry my english! rsrs
Example:
<h4 class="sub-titulo">texto</h4>
(http://visibilita.com.br/teste01/missao-visao-valores.php)
You must use this css properties:
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
The webkit browser adjusts the text of certaint tags to what it thinks is best. This can have the effect that you expenrience.
Keep the browser from adjusting the text by adding this to the style of your body:
-webkit-text-size-adjust: 100%;
Thats because your reset.css use font-size:100% property for your elements like p, h1, h2 etc.
Try to replace it and declare your own properties. For example:
p {
font-size:15px;
}
h2 {
font-size:21px;
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm working on a Qur'an app (Qur'an is the holy text for Muslims), and there are a number of such apps on the market already, but the one I have in mind is a bit special.
There are two types of Qur'an apps: the types that look exactly like a certain version of the paper copy (i.e. page 1 looks exactly the same in all copies, regardless of the publisher). The problem with these apps is that they use images to ensure each page looks exactly the same, which is unnecessary bandwidth and also is not very flexible. This also does not allow the user to select individual verses (to say, get the translation or to hear the recitation of that particular verse).
Example:
The other type of Qur'an is the type that does use text, and allows for the flexibility of verse selection. The caveat being of course, that there are no "pages," the apps tend to merely have each verse on its own line (wrapping around if necessary).
Example:
The problem with the second type of Qur'an app is that the Qur'an is one of the most widely memorized books. And one of the ways people memorize it is by location on the page.
So I want to combine these two worlds. I want to use text to render the Qur'an, but I also want it to look exactly like the paper version, page for page, line for line.
Would that be possible?
This is what I have (very rough):
http://jsfiddle.net/abustamam/wGJzm/1/
This is my CSS:
#font-face {
font-family: Arabz;
src: url(https://dl.dropboxusercontent.com/u/17145089/tyaslab/KFGQPCUthmanTahaNaskh.ttf);
}
p {
font-family: Arabz;
text-align: justify; /*To justify the text, all the books do this */
font-size: 26px;
}
Thanks!
Edit 2: Upon further reflection, the defining factor would be finding a font. As there is no single pattern that governs the script of the Qur'an (sometimes the same word can be written differently depending on context), I don't think a font exists for this. Using any other font would work theoretically, in context of this question, but it would not be something that someone would use since it does not mimic the physical text.
You can approach the image quality by using a few CSS Properties.
body {
background-image: url(BACKGROUND_IMAGE_URL_HERE);
background-size: cover;
}
then
text-align: justify /*To justify the text, all the books do this */
font-size: CUSTOME_SIZEpx /* With justify and this you can control very rigorously your page content to fit exactly as the original book does */
You will have by the way the verse selection as you are using the text approach.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
I have a problem regarding the layout of my css. When i use Firefox the layout is ok. Just like i want to. But in Chrome there is a big difference. I have used css reset but it just messed up with my css. I don't know what to do, every tip will be helpful.
http: //83.212.122.240/
My site is in Greek.
There are differences in the navigation buttons and in my login form between the two browsers.
Here is my code:
https://www.dropbox.com/s/u68pv6t91p3lk24/index.html
And my css:
https://www.dropbox.com/s/fa7alsvsfhw62qy/templatemo_style.css
I check browser behavior for text-boxes only. You have to fix height and line-height of all text boxes as below :
.text-box {
height : 18px;
line-height : 18px;
padding : 2px;
}
Line height will take care of the text filled in text-box.
All browser is very sensitive to CSS. So you have to define all rules in CSS so that it should be same in all browsers.
So you have to take care of CSS for every DIV.