I have a problem accessing my website with and Android device using Jelly Bean 4.3. The div containing the text is not filled horizontally (less than half of it) but only if text-align is set to left (as it should). If set to center, it is filled but it looks ugly.
This is my h4 CSS definition:
h4
{
text-align: left;
width: 90%;
font-size: 180%;
font-style: normal;
font-family: "Times New Roman", Times, serif;
padding: 10px 40px;
}
Which could be the cause ?
I'm not a real HTML expert but I'm pretty sure it's a bug.
I have no idea why, but if I add a color to background-color it works.
Not transparent, inherit or initial but a real color otherwise it doesn't work. Since the parent div has a
background: -webkit-radial-gradient(rgba(230,230,230,0.7), rgba(240,240,255,0.8), rgba(230,230,230,0.7));,
setting a color makes all look ugly so I added a
background: -webkit-radial-gradient(rgba(230,230,230,0.0), rgba(240,240,255,0.0), rgba(230,230,230,0.0));
to the h4 and it looks perfect, transparent background and div filled with text.
So the h4 is now:
h4
{
text-align: left;
width: 90%;
font-size: 180%;
font-style: normal;
font-family: "Times New Roman", Times, serif;
padding: 10px 40px;
background: -webkit-radial-gradient(rgba(230,230,230,0.0), rgba(240,240,255,0.0), rgba(230,230,230,0.0));
}
I hope this helps someone with the same wierd problem.
Related
very new to this and have tried several fixes without success.
Inside h1, my fonts are all correct and reacting as expected:
h1 {
position:relative;
left: -10px;
top: -16px;
padding: 2em;
height: 3em;
width: 100%;
background: #545454;
font-family: "Avenir Light", sans-serif;
font-size: .7em;
text-align: center;
color: darkgray}
h1 p {
font-weight: 30;
word-spacing: 30px;}
But the text isn't responding anywhere else on my page, even when inserted under body, body p, into each individual element... It's driving me nuts!
body {
margin: 0, 0;
padding: 0, 0;
overflow-x: hidden;
background: #765264;
color: white;
font-family: "Avenir Light", sans-serif;
font-size: 16px;
line-height: 1.5;
}
body p {
font-size: 1em;
font-family: "Century Gothic";
font-weight: 30;
letter-spacing: 1px;
}
Weirdly, inserting letter-spacing above seemed to make the spacing larger.
Here's my HTML, for reference:
<head>
<div class="header" id="myHeader">
<h1>
<link rel="stylesheet" href="peytonsite.css">
<p>
<img src="https://static.wixstatic.com/media/058e45_e590acfd22c440f4b5c89450738f321d~mv2.png/v1/fill/w_100,h_100,al_c,q_85,usm_0.66_1.00_0.01/058e45_e590acfd22c440f4b5c89450738f321d~mv2.webp">
<a>HOME</a>
<a>SKILLS</a>
<a>PORTFOLIO</a>
<a>EXPERIANCE</a>
<a>CONTACT</a>
</p>
</h1>
</div>
</head>
<article>
<section id="LANDING">
<img id="LongLogo" src="https://static.wixstatic.com/media/058e45_0291502c1e424532bbd24f9cfd50fd1e~mv2.png/v1/fill/w_1466,h_348,al_c,q_90,usm_0.66_1.00_0.01/Long%20Logo.webp">
<p>PASSIONATE DESIGN</p>```
Please help!
Update:
30 isn't a valid font-weight, and, your font may not necessarily have a boldness available to it.
Try: font-weight: bold;
or: font-weight: 300; (300 is usually non-bold)
A few other ideas:
You probably want a comma between h1 p { in your second CSS block.
Secondly- Is your target text within a <p> block?
For debugging purposes, what happens if you append !important to your styles? Does that show what you want?
What happens if you delete the h1 p { ... block, and add this in at the bottom of your CSS?
p {
font-weight: 300!important;
word-spacing: 30px!important;}
If nothing changes, I suspect you don't have the right CSS selectors.
Here is a CodePen of your CSS correctly applying
What I am trying to do is create a <pre> tag that will look like a bash terminal - black background and white letter, mono spaced font.
pre.bash {
background-color: black;
color: white;
font-size: medium ;
font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
display: inline;
}
<pre class="bash">
-bash-3.2$ groups
unixuser feegroup figroup fogroup fumgroup
</pre>
Use display: inline-block; to make the background a rectangle, instead of just going behind the text.
And if you want it to fill the full width of the page, instead of just the longest line, use width: 100%;
pre.bash {
background-color: black;
color: white;
font-size: medium ;
font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
width: 100%;
display: inline-block;
}
<pre class="bash">
-bash-3.2$ groups
unixuser feegroup figroup fogroup fumgroup
</pre>
You can remove the display-inline:
pre.bash {
background-color: black;
color: white;
font-size: medium ;
font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
}
<pre class="bash">
-bash-3.2$ groups
unixuser feegroup figroup fogroup fumgroup
</pre>
All you need to do is change your display from display: inline to display: inline-block :)
This is because when you set the background color to black, it is going to paint the background of the element. An element specified as inline will only be as large as the content of that line. By changing it to inline-block the element will take up the full space of that line as given by the characteristics of a block-level element. If you would like to know more, here is a link to w3's explanation of the display property.
Try changing display: inline; to display: block;
I have the following code
<div class="testimonial_description_inner" style="width: 640px;">
We can’t solve problems by using the same kind of thinking we used when we created them.
<strong class="testimonial_author">- Einstein</strong>
<p class="testimonial_meta"></p>
</div>
I want to add an opening and closing quote only on the part of:
We can’t solve problems by using the same kind of thinking we used when we created them.
When I use it like this:
.testimonial_description_inner:before {
content: "\201C";
font-size: 40px;
font-family: Georgia, serif;
}
.testimonial_description_inner:after {
content: "\201C";
font-size: 40px;
font-family: Georgia, serif;
}
the closing quote is at the end of the whole div. How can I choose only the inner part to apply the CSS rule without changing the HTML code?
You could add the closing quote as a before pseudoelement on .testimonial_author.
I've used display: inline-block to line it up with the preceding text, but float: right might also work...
.testimonial_description_inner:before {
content: "\201C";
font-size: 40px;
font-family: Georgia, serif;
}
.testimonial_author:before {
content: "\201C";
font-size: 40px;
font-family: Georgia, serif;
display: inline-block;
}
<div class="testimonial_description_inner" style="width: 640px;">
We can’t solve problems by using the same kind of thinking we used when we created them.
<strong class="testimonial_author">- Einstein</strong>
<p class="testimonial_meta"></p>
</div>
On this page: https://www.nycofficesuites.com/new/offices/, I want to change the font size on red bar across the top (where it says "Office Space"). I've entered this code but it's not working.
.page-title h1 {
font-size: 35px !important;
}
Thanks!
If you can't update the existing rule, your new rule will need to appear after the existing rule as they are both marked as "!important".
The existing rule is showing in "custom.css":
.page-title h1 {
font-size: 46px !important;
font-weight: normal;
}
In custom.css you have,
.page-title h1 {
font-size: 46px !important;
font-weight: normal;
}
Either edit that file or add/load your overriding css after custom.css (order of load matters, the last one is considered).
Side note: Try to avoid using !important as much as you can.
If this is something you are just messing with you can declare it inline.
<h1 style="font-size: 35px !important;">Office Space</h1>
Or
.header {
font-size:35px;
font-weight:bold;
font-family: 'Pontano Sans', Arial, sans-serif;
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
<span class="header">Office Space</span>
Just figured this out, thanks for your help everyone. The person who wrote the theme put this in a file called custom.css.php. So this was overriding the place where I was entering CSS. (This is a Wordpress site.)
I am attempting to make my site responsive, I give my heading text 15px of padding however if the text stretches onto a new line the next line doesn't get the correct padding on the left side. Is it possible to make the text align?
Here is a screenshot of the text.
Here is the CSS i'm using.
.article_title {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 10px;
color: #666;
font-weight: bold;
padding: 15px;
}
and my html element is
<span class="article_title">Building Refurbishment and Modernisation</span>
span is an inline element, which means the left padding is not applied to it.
Just add the display: block; to the CSS code and it should work fine.
.article_title {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 10px;
color: #666;
font-weight: bold;
padding: 15px;
display:block
}
The display:block should do the trick. Notice I have also changed the line-height to 15.
you can just add display:table; and remove line-height for responsive layout.
.article_title {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
color: #666;
font-weight: bold;
padding: 15px;
display: table;
}
http://jsfiddle.net/oapu11q4/28/
Just change the span to div. Using a span while forcing it to be a block element is counter-intuitive.