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.
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
So I'm not unable to use margin that consists of three texts. I tried adding it both in html and css, none of them worked. Am I supposed to format it in a different way?
.middlelectureread {
margin-left: 740px;
font-family: Arial, Helvetica, sans-serif;
font: bold;
font-size: 20px;
}
.middlecaptivityread {
margin-left: 210px;
font-family: Arial, Helvetica, sans-serif;
font: bold;
font-size: 30px;
}
.middleprotestread {
margin-left: 210px;
font-family: Arial, Helvetica, sans-serif;
font: bold;
font-size: 30px;
}
<span class="middlelectureread">READ MORE</span><span class="middlecaptivityread">READ MORE</span><span
class="middleprotestread">READ MORE</span>
Like Neffy wrote you shouldn't use span here. Span element is inline and shouldn't be a container to postion elements. For such things we have divs or HTML5 semantic elements like Section, Header, Footer etc. span can be useful when we want to style for example a part of some text, paragraph.
<p>If you do it you will see a <span class="warning">warning</span>sign</p>
And if we apply color to this span it will work.
I've tried reducing the vertical space between two lines of text using various CSS properties, such as margin-top and padding, but nothing seems to work.
The two lines look like so:
I want them much closer together, so that they are almost touching. No matter what I do with the margin-top property, though, it's not enough and eventually gets to a point where I'm making things even worse.
Here is the CSS and HTML:
<style>
.jumbotronjr {
padding: 12px;
margin-bottom: -16px;
font-size: 21px;
font-weight: 200;
line-height: 2.1428571435;
color: inherit;
background-color: white;
}
.titletext {
font-size: 2.8em;
color: darkgreen;
font-family: Candara, Calibri, Cambria, serif;
margin-left: -32px;
}
.titletextjr {
font-size: 1.4em;
color: darkgreen;
font-family: Candara, Calibri, Cambria, serif;
margin-left: -32px;
}
</style>
</head>
<body>
<div class="container body-content">
<div class="jumbotronjr">
<div class="col-md-3" style="margin-top: 1cm">
<img src="http://www.proactusa.com/wp-content/themes/proact/images/pa_logo_notag.png" alt="PRO*ACT usa logo">
</div>
<div class="col-md-9">
<label class="titletext" style="margin-top: 0.1cm;">eServices Reporting</label>
<br/>
<label class="titletextjr" style="margin-top: -2cm;">Purchasing Report for RB Kitchen</label>
</div>
</div>
What change or addition do I need to make to get these lines closer together (specifically, for the second line to move up vertically)?
There is a large space between them because your .jumbotronjr class has a line-height: 2.1428571435;. Remove this and it will remove the space between your text.
.jumbotronjr {
padding: 12px;
margin-bottom: -16px;
font-size: 21px;
font-weight: 200;
line-height: 2.1428571435; /* <--- Remove this */
color: inherit;
background-color: white;
}
JSFiddle
The limited-flexibility with vertical space is due to the <br> tag. The alternative approach would be to remove the <br> and display the labels as blocks in order to get the stacked appearance. Then, as you can see, your spacing margins and paddings (even line-heights) work as intended.
.jumbotronjr {
padding: 12px;
margin-bottom: -16px;
font-size: 21px;
font-weight: 200;
line-height: 2.1428571435;
color: inherit;
background-color: white;
}
.titletext {
font-size: 2.8em;
color: darkgreen;
font-family: Candara, Calibri, Cambria, serif;
margin-left: -32px;
display:block;
}
.titletextjr {
font-size: 1.4em;
color: darkgreen;
font-family: Candara, Calibri, Cambria, serif;
margin-left: -32px;
display:block;
}
<div class="container body-content">
<div class="jumbotronjr">
<label class="titletext" style="margin-top: 0.1cm;">eServices Reporting</label>
<label class="titletextjr" style="margin-top: -2cm;">Purchasing Report for RB Kitchen</label>
</div>
</div>
Do you have any control over the markup? The use of the <label> tag here is incorrect. From Mozilla Developer Network - "The HTML Label Element () represents a caption for an item in a user interface. It can be associated with a control either by placing the control element inside the element, or by using the for attribute." - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
For proper semantics, I would recommend changing these to header tags as they seem to convey a heading on the page.
By simply changing these elements and removing the <br> tag I believe you will achieve the desired effect:
<h1 class="titletext" style="margin-top: 0.1cm;">eServices Reporting</h1>
<h2 class="titletextjr" style="margin-top: -2cm;">Purchasing Report for RB Kitchen</h2>
If you insist on using the <label> tags, you could adjust the line height to a value of "1".
Why don't you play with line-height instead of using margins etc? This is a quite big value:
line-height: 2.1428571435;
Put sth smaller in there according to your needs.
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.
I have noticed when I have a <h2> tag directly below an <h1> tag there is a large gap between the two. No padding or margin is set and I've normalised the css using normalize.css. Why does this gap exist?
Fiddle here: fiddle
Here is a screen shot:
html (normalize.css is active on this html)
<div class="header">
<div class="wrapper">
<h1>Portfolio of...</h1>
<h2>Jing Xue</h2>
</div>
</div>
css
.wrapper {
width: 940px;
margin: 0 auto 0 auto;
}
/* header ------------------------------------------------------------------ */
.header {
text-align: center;
padding: 40px 0 0 0;
margin-bottom: 40px;
}
.header h1 {
font-family: 'Delius Swash Caps', cursive;
font-size: 250%;
color: rgb(200,50,50);
/* margin-bottom: -50px; */
}
.header h2 {
font-family: 'Playfair Display SC', serif;
font-size: 450%;
color: rgb(59,67,68);
}
Further Question
For what ever the reason for this big gap between "portfolio of..." and "Jing Xue", is the correct way to reduce the gap to give a negative top/bottom margin on the corresponding <h..>?
h1 through h4 tags have a default margin. You need to remove that margin in your CSS.
.header h1 {
font-family: 'Delius Swash Caps', cursive;
font-size: 250%;
color: rgb(200,50,50);
margin:0;
}
.header h2 {
font-family: 'Playfair Display SC', serif;
font-size: 450%;
color: rgb(59,67,68);
margin:0;
}
This is normal behaviour for these elements..
You forgot to take the default margin-top off of your h2 element. Simply add margin-top:0px; to your h2 class.
Here is a working jsFiddle.
Your class should now look like below:
.header h2 {
font-family: 'Playfair Display SC', serif;
font-size: 450%;
color: rgb(59,67,68);
margin-top:0px;
}
Here is an image from W3 regarding some default styles of elements:
See more about default styles of elements here on W3.org.