I'm using bootstrap and I'm trying to make a hint paragraph's p.tiny text very tiny in size. Using developer's tools show me that the font could not be smaller if it is less than 15 px. The following is what I have tried:
window.history.back();
nav,
.container {
display: none;
}
h1 {
color: red;
}
div.panel * {
text-align: center;
font-family: AraJozoor-Regular, Arial, Ubuntu, serif;
text-shadow: 1px 0px 2px #800000;
}
div.panel hr {
height: 20px;
background: red;
}
div.panel img {
display: block;
margin: 0 auto;
}
p.tiny {
font-size: 8px !important;
text-shadow: none;
font-style: italic;
font-weight: 400;
font-family: sans-serif;
}
<div class="panel">
<img src="/imgs/wrong.png" />
<h1>Error: 1</h1>
<h3>This Application Works Only With Javascript Enabled Browsers.</h3>
<h3>Please contact the system Administrator.</h3>
<div>Your browser: Chrome, Version: 61.0<sup>(*)</sup></div>
<hr />
</div>
<p class="tiny">(*): It`s estimated information and it may not be accurate enough.</p>
I also tried to set the font size of p.tiny with proportional units, i.e % and em but that would not decrease the font size either.
Some browsers have a "minimum font-size" setting (for example Firefox: 10px) and they won't display text smaller than that to keep it always readable. This is purely a browser setting and overrides any CSS rules. I f you change this setting to 8px, you'll see the desired result, but other users won't, unless they change that setting in their browser.
the code you provided in the question has the style and script tag between the </head> and <body> This is not legal. Try moving the tags?
here is a working version
plnkr.co/edit/FFB1K3j1dmUaWdBir5M9?p=preview
Related
I've been testing the same font (Big John is the name of the font) in different devices. The height or baseline of the font isn't consistent across devices.
Here are the pictures:
Windows Chrome :
Android Chrome :
macOS Chrome :
CSS for the button :
.btn-grey{
letter-spacing: 2px;
font-size: 30px;
color: white;
border-radius: 15px;
padding: 2% 5% 2% 5%;
font-weight: bold;
background: #CBCBCB;
}
.btn-content{
background: blue;
}
HTML for the button :
<button type="button" className="btn btn-grey">
<div className={"btn-content"}>VISIT THE WEBSITE</div>
</button>
You are not setting either line-height or vertical-alignment properties for that element, so each browser falls back to it's own default styles. And of course, different browsers have different default styles.
The solution is to explicitly set the styles you want, e.g. by adding the following to your declaration:
btn-grey {
line-height: 1;
vertical-align: middle;
}
Just an FYI, but className is not a valid html attribute, it should be just class=
A few days ago I started learning HTML / CSS in my spare time and programming my own test website. At some point I encountered a problem when I tried to visit my website on my smartphone. Here Here you can see that the Picture is shifted above the border.
Everything works fine on the desktop, but as you can see, it has moved on the mobile device. I tried several methods, but none of them resolved the problem. Since I just started, I have no other ideas.
I do not want to post all my code, so the problem is here
thank you in advance
Your problem is not only related to mobile I'm afraid.
That is what happens when you float, the container element loses its layout. To fix it you just need to give it back applying for example an overflow: hidden.
But I suppose you want to still have the img on the right of the Personal Data, for that you have to put the image inside the same container, applying the overflow: hidden.
Just like this:
/*SCHRIFTART*/
#font-face {
font-family: 'Levenim MT';
font-style: normal;
font-weight: normal;
src: local('Levenim MT'), url('ufonts.com_levenim-mt.woff') format('woff');
}
/*ALLGEMEIN*/
* {
margin: 0;
padding: 0;
}
/* CONTENT */
#PB-Bild {
float: right;
margin-top: 6px;
margin-right:7.5px;
}
#Information {
overflow:hidden;
height: 30%;
width: 98%;
border: 7px outset grey;
background-color:whitesmoke;
font-family: 'Arial Rounded MT';
padding-left: 5px;
color:darkblue;
}
.was {
font-size: 150%;
font-weight:900;
}
p.was::first-letter {
color:brown;
font-size:160%;
}
.was {
font-family:Arial;
color: black;
}
.uText {
font-family:Arial;
background-color:ivory;
font-size:120%;
}
<div id="Information">
<img id="PB-Bild" src="https://fakeimg.pl/300x350">
<p class="was">Name:</p>
Domenic Malz <br>
<p class="was">Alter:</p>
16 Jahre <br>
<p class="was">Geboren am:</p>
29.04.2002 <br>
<p class="was">Wohnort:</p>
Berlin <br>
<p class="was">E-Mail</p>
postfach#domenicmalz.de <br>
</div>
The issue you are bringing is known as responsiveness. There are many ways to make your website responsive, first thing I noticed when looking at your code, in your css you are making use of "px" values, they are pixel values meaning they are not scaling with the size of the screen. You should familiarise yourself with more responsive values such as "vw" and "vh" that do scale according to the size of the screen.
If you add a few properties to #banner2, you can ensure the background does not auto scale.
#banner2 {
…
background-size: cover;
background-position: center;
}
I would love to style my input field very similar to the divs I am building. However, I am unable to solve sizing issues.
Here is an example
http://codepen.io/anon/pen/kLwlm
And here is one more (with overflow:visible and fixed height)
http://codepen.io/anon/pen/Fxjzf
As you can see, it looks very different than the divs, and no matter what I tried, I could not make them look similar. First of all, I would love to make the input in a way that the text will pop put (overflow: visible? not working).
Secondly, the height should be similar to the divs. Setting the height and line-height properties does seem to effect the temporary text, but when it's clicked (and started to type) it breaks. (check second example)
Shortly, open to suggestions.
Try this solution here:
#import url(http://fonts.googleapis.com/css?family=Playfair+Display:400,700,900,400italic,700italic,900italic);
body {
margin: 100px;
background-color: #f7f7f7;
}
input{
border:0;
}
div, input{
font-family: 'Playfair Display', serif;
font-size: 40px;
background-color: #ff44ff;
width: 100%;
margin-top: 20px;
line-height: 40px;
}
div {
padding: 1px 0px 13px 2px;
color: #999;
}
I tried placing the input in div and then making the input background to transparent. YOu can play with the spacing to you liking, but it works http://codepen.io/anon/pen/Brcpl
I came up with this JSFiddle. I removed the line-height and positioned text using padding instead (that fixed the aligning of the input text).I also styled the placeholder. Here is a part of your CSS which I changed (do read the notes in it).
div, input{
font-family: 'Playfair Display', serif;
font-size: 40px;
background-color: #ff44ff;
width: 100%;
margin-top: 20px;
padding: 5px 0px 5px 0px;/*use padding to adapt the size*/
}
/*Change placeholder properties*/
#s::-webkit-input-placeholder {
color: black;
}
#s:-moz-placeholder { /* Firefox 18- */
color: black;
}
#s::-moz-placeholder { /* Firefox 19+ */
color: black;
}
#s:-ms-input-placeholder {
color: black;
}
PS: I do suggest styling the input-box differently so the visitors of your website notice it is actually a input-box.
What about this one: http://codepen.io/anon/pen/lcgAD
css
div input {
border: none;
font-size: 40px;
width: 100%;
background: transparent;
color: #000;
font-family: 'Playfair Display', serif;
}
div input:hover {
}
div {
color: #000;
background-color: #892;
height: 41px;
}
html
<div>
<input placeholder="Enter E-Mail ayxml#gmail.com" value="Enter E-Mail ayxml#gmail.com"/>
</div>
I am encountering a peculiar text behavior with different browsers. I cannot say which browser of the 3 is acting peculiar. Before I give out the details of my problem let me illustrate the issue I am encountering..
Outputs::
layout format::
Now the corresponding css codes are as follows::
#feature_links_inner_block {
width: 205px;
height: 390px;
margin: 0 auto;
}
#side_nav_links {
width: 99%;
height: 375px;
margin: 0 auto;
}
.one_third_side_nav_block {
width: 100%;
height: 125px;
}
.one_third_side_nav_block h4 {
margin: 3px 0px 0px;
padding: 0;
font-family: "marcellus sc";
font-size: 19px;
color: #f1d000;
text-align: center;
}
.one_third_side_nav_block img {
float: left;
margin: 1px 3px 0px 1px;
}
.one_third_side_nav_block p {
margin: 3px 0px 5px 0px;
font-family: "trebuchet ms",Arimo, sans-serif;
font-size: 14px;
color: #fff;
}
HTML::
<div id="feature_links_inner_block">
<div id="side_nav_links">
....
<a href="news_media_blurbs.html">
<div class="one_third_side_nav_block white_bottom_border">
<h4>News, Media & Blurbs</h4>
<img src="../Images/png/apply.png" alt="News and Media image" />
<p>What is happening now?</p>
</div>
</a>
...
</div>
</div>
I am trying to figure out what is causing this to happen. Its the same code but rendered different. I have tried to look at the computed values in each browser but they all seem to be the same. If anyone wants it i have the computed values of chrome and firefox copied as a text file.
Ideally I want the final output to look like the chrome output. This is just a small part of the page. I have other sections in the page which runs into similar issue.
Is chrome rendering correctly and the rest 2 not? or is it the other way around?
Any help is appreciated. Thanks in advance
Addendum::: I forgot to mention that I am using HTML5-Boilerplate as my template
The issue here was that the div containing the H4 element was not rendering with a large enough width in Chrome to display the H4 on a single line and the text was wrapping. The OP said that this was actually the desired effect, so I suggested manually adding in a line break to force the H4 to break at the desired point.
If the OP had wanted the H4 to remain on one line, they could have, alternatively, reduced the font-size by a point or two to allow the H4 enough room to exist on one line across all browsers.
This ended up working for the OP:
<h4>News, Media &<br/>Blurbs</h4>
Is it possible to achieve line-height consistency in all browsers?
I have attached an image. You will notice a red rectangular box and a green rectangular box (both of the same width and height) which I have added via photoshop manually to aid in showing the the space/gap difference between the dotted lines (below the red box) and the "Followers: 3197179" text.
It seems that Firefox is the only one that is displaying the elements differently. I notice this when I apply a line-height. Any way I can make this consistent with all browsers?
I am using Firefox 3.6.13, Safari 5.0.3, Opera 10.63 and Chrome 8.0.552.231.
.clearfix,
.container {
display: block;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
position: relative;
margin: 0 0 0 0;
padding: 12px 0;
border-bottom: 1px dotted #E7E7E7;
}
li img {
float: left;
margin-top: 0;
}
li p {
margin: 0 0 0 58px;
padding: 0;
font-weight: normal;
border: none;
font-size: 1em;
line-height: 1.3em;
}
li p.name {
position: relative;
padding-top: 0;
font-size: 1.1em;
font-weight: bold;
}
<ul>
<li class="clearfix">
<img width="50" src="http://localhost:3000/images/foobar.gif" alt="thumb">
<p class="name">
Jessica Simpson
</p>
<p>Blurred out text here</p>
<p>Followers: 3197179</p>
</li>
</ul>
Your currently using em's. Maybe you can try to be more specific by trying to use px in both line-height and font-size. Also try to use padding in those texts, maybe it'll work, I think ;).
In any cross browser thing you do. There's is no concrete way of doing things to make it same on every renderer. It's always a dream that most client's don't understand. For me, it's better to always explain to them what they want and how much time we spend in things like 1px/2px differences. It's plain normal. You may check this video by Andy Clarke speaking about cross browser and some other cool stuff.
Are you using a CSS reset? These help alleviate most of the cross-browser issues. Meyer Web has a popular one: http://meyerweb.com/eric/tools/css/reset/
You can add line-height for Mozilla only, by using:
#-moz-document url-prefix() {
*, body {
line-height: [as per your requirement];
}
}
Have you specified any common rules? e.g:
* {
margin: 0;
padding: 0;
}
body {
font-size: 100%;
line-height: 1;
}
Sometimes it's helpful, even without full reset.css approach.
It might be how the font is being rendered. Try using this as a font family.
font-family:"Arial Unicode MS","Lucida Sans Unicode";