CSS: paragraph display inline when it shouldn't - css

I'm trying to design a Card but my <p> text is somehow inline. I don't want that. I tried display: block;and other options but that doesn`t work.
I work with Bootstrap and CSS but as far as I know, this is a plain CSS question.
Here is my Html for one card:
<div class="">
<div class="card">
<img class="card-img-top" src="../../../assets/images/offer_1.jpg">
<div class="card-body text-center">
<h1>{{offer.name}}</h1>
<p>{{offer.description}}</p>
<h2>{{offer.price}}€</h2>
</div>
And here my SCSS:
$font-serif: 'Playfair Display', serif;
$font-sans-serif: 'Raleway', sans-serif;
$color_price: #F96D00;
$color_description: #b8b8b8;
.card {
border-radius: 0;
.card-body {
padding: 3rem;
h1 {
font-family: $font-serif;
font-weight: bold;
line-height: 1.45;
font-size: 26px;
}
h2 {
font-family: $font-serif;
font-weight: bold;
line-height: 1.45;
font-size: 22px;
color: $color_price;
}
p {
font-family: $font-serif;
line-height: 1.45;
font-size: 18px;
color: $color_description;
height: 100px;
}
}
}
It looks like this:
Edit: The Problem is the paragraph has a flixible width but the text inside is somehow always inline and wider then the paragraph itself.

You don't need to use overflow:hidden or !important on text-align: center.
You need to set a maximum width on the card element that is the parent of the P.
Look at your styles rendered in a codepen:
https://codepen.io/NeilWkz/pen/vaaMoO
The name and price are left-aligned, and the description is center aligned.
This is because you've used a helper class 'text-center' I assume this comes from some framework that you have not mentioned in your question. The helper class will not cascade down if you have alignment set on the h1 or h2 element, in that case you need to apply it to the actual element:
HTML:
<div class="">
<div class="card">
<img class="card-img-top" src="../../../assets/images/offer_1.jpg">
<div class="card-body">
<h1 class="text-center">{{offer.name}}</h1>
<p class="text-center">{{offer.description}}</p>
<h2 class="text-center">{{offer.price}}€</h2>
</div>
</div>
SCSS:
$font-serif: 'Playfair Display', serif;
$font-sans-serif: 'Raleway', sans-serif;
$color_price: #F96D00;
$color_description: #b8b8b8;
.card {
border-radius: 0;
//Added width & background color for demo
width: 320px;
background: azure;
.text-center {
text-align: center;
}
.card-body {
padding: 3rem;
display: block;
h1 {
font-family: $font-serif;
font-weight: bold;
line-height: 1.45;
font-size: 26px;
display: center;
}
h2 {
font-family: $font-serif;
font-weight: bold;
line-height: 1.45;
font-size: 22px;
color: $color_price;
}
p {
font-family: $font-serif;
line-height: 1.45;
font-size: 18px;
color: $color_description;
height: 100px;
}
}
}
Here's a working pen with the styles above:
https://codepen.io/NeilWkz/pen/gjjJpw

Related

I want the css background color of text to be a block but have padding all around even when line is broken [duplicate]

I have a minimal example here: https://codepen.io/cpcpcpcpcpx/pen/VwZWoyJ
Containing the following:
.wrapper {
width: 200px;
}
h1 {
font-size: 32px;
font-family: Tahoma, Helvetica, sans-serif;
line-height: 50px;
}
.header-text {
background: #aabbcc;
padding-left: 20px;
padding-right: 20px;
border-radius: 6px;
}
<div class='wrapper'>
<h1>
<span class='header-text'>
Long text that wraps
</span>
</h1>
</div>
The horizontal padding only applies to the very beginning and end of the text where it wraps, but I want it to apply on every line. I'm OK with the border-radius not being at the line-break points of every line, but I need the padding to apply.
If I put padding-top into the .header-text class that applies to both lines, so I'm unclear why the points where lines wrap ignore the horizontal padding options.
Is there a way to do this in CSS?
What you want can be achieve using box-decoration-break and it will even work with border-radius:
.wrapper {
width: 200px;
}
h1 {
font-size: 32px;
font-family: Tahoma, Helvetica, sans-serif;
line-height: 50px;
}
.header-text {
background: #aabbcc;
padding-left: 20px;
padding-right: 20px;
border-radius: 6px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
<div class='wrapper'>
<h1>
<span class='header-text'>
Long text that wraps
</span>
</h1>
</div>
You should change .header-text display to either block or inline-block
you could try in another way
.header-text {
padding: 0;
word-spacing: 5px;
}
May it will help u out. Increase the width of the .wrapper so the padding will apply.
HTML PAGE
<div class='wrapper'>
<h1>
<span class='header-text'>
Long text that wraps
</span>
</h1>
</div>
CSS Page
.wrapper {
width: 500px;
}
h1 {
font-size: 32px;
font-family: Tahoma, Helvetica, sans-serif;
line-height: 50px;
}
.header-text {
background: #aabbcc;
padding-left: 20px;
padding-right: 20px;
border-radius: 6px;
padding-top:12px;
padding-bottom:12px
}

Align Horizontal Rule in Css, Not aligning properly

How can I do something like this?
The Orange Line should be on the same Line as the Instruction Text, I have this as my CSS Code
.InstructionText{
margin-bottom: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 29px;
text-align: center;
color: #007FC0;
text-transform: uppercase;
font-style: italic;
font-weight: bold;
}
.hr-rule{
position: absolute;
border: 7px solid #FF9900;
width: 400px;
}
But rather than have the above image, I have this Instead.
And using it inside the code I have this
import React from 'react';
import './app-styles.css';
import Vector from './Vector.png'
import ie_logo from './ie_logo.png';
import {Link} from 'react-router-dom';
function HomePage() {
return (
<div className="App">
<header className="header">
<img src={Vector} style={{margin:7, flexDirection:'column', alignItems: 'center'}} alt="Vector" />
<img src={ie_logo} style={{margin:7, flexDirection: 'row', width:114, height:25}} alt="ie_logo" />
<p className="needhelpText">REGISTERED? LOGIN</p>
</header>
<form>
<div className="InstructionText">
payment
</div>
<div className="hr-rule">
</div>
</form>
<footer className="footer">
Privacy Policy |
Do Not Sell My Personal Information |
Advertising Guidelines |
Site Map
<div className="copyrightText">
© Copyright 2021 | Lucas Tech | All Rights Reserved
</div>
<div className="footerLogo">
<img src={ie_logo} alt="ie_logo" />
</div>
</footer>
</div>
);
}
export default HomePage;
This seems like a very complicated method. Why not use a pseudo-element?
.InstructionText {
margin-bottom: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 29px;
justify-content: center;
color: #007FC0;
text-transform: uppercase;
font-style: italic;
font-weight: bold;
display: flex;
}
.InstructionText:after {
content: "";
border-bottom: 7px solid #FF9900;
margin-bottom: 7px;
width: 200px; /* or whatever width you require */
}
<div class="InstructionText">
payment
</div>
The main reason being that div is a block element by default, thus it will stack on top of each others. We can achieve your goal by using flex, which put the 2 divs side-by-side:
HTML:
<form>
<div class="header-container">
<div class="InstructionText">
payment
</div>
<div class="hr-rule"></div>
</div>
</form>
CSS:
.header-container {
display: flex;
justify-content: center;
align-items: center;
}
.InstructionText{
margin-bottom: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 29px;
text-align: center;
color: #007FC0;
text-transform: uppercase;
font-style: italic;
font-weight: bold;
}
.hr-rule{
margin-left: 20px;
height: 14px;
background-color: #FF9900;
width: 400px;
}
For the thick line, instead of using border, it's more efficient and understandable to just make a div with the width and 14px height, which achieve the same thing.

How can I make padding apply to wrapped text with CSS?

I have a minimal example here: https://codepen.io/cpcpcpcpcpx/pen/VwZWoyJ
Containing the following:
.wrapper {
width: 200px;
}
h1 {
font-size: 32px;
font-family: Tahoma, Helvetica, sans-serif;
line-height: 50px;
}
.header-text {
background: #aabbcc;
padding-left: 20px;
padding-right: 20px;
border-radius: 6px;
}
<div class='wrapper'>
<h1>
<span class='header-text'>
Long text that wraps
</span>
</h1>
</div>
The horizontal padding only applies to the very beginning and end of the text where it wraps, but I want it to apply on every line. I'm OK with the border-radius not being at the line-break points of every line, but I need the padding to apply.
If I put padding-top into the .header-text class that applies to both lines, so I'm unclear why the points where lines wrap ignore the horizontal padding options.
Is there a way to do this in CSS?
What you want can be achieve using box-decoration-break and it will even work with border-radius:
.wrapper {
width: 200px;
}
h1 {
font-size: 32px;
font-family: Tahoma, Helvetica, sans-serif;
line-height: 50px;
}
.header-text {
background: #aabbcc;
padding-left: 20px;
padding-right: 20px;
border-radius: 6px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
<div class='wrapper'>
<h1>
<span class='header-text'>
Long text that wraps
</span>
</h1>
</div>
You should change .header-text display to either block or inline-block
you could try in another way
.header-text {
padding: 0;
word-spacing: 5px;
}
May it will help u out. Increase the width of the .wrapper so the padding will apply.
HTML PAGE
<div class='wrapper'>
<h1>
<span class='header-text'>
Long text that wraps
</span>
</h1>
</div>
CSS Page
.wrapper {
width: 500px;
}
h1 {
font-size: 32px;
font-family: Tahoma, Helvetica, sans-serif;
line-height: 50px;
}
.header-text {
background: #aabbcc;
padding-left: 20px;
padding-right: 20px;
border-radius: 6px;
padding-top:12px;
padding-bottom:12px
}

strech two lines to same length?

I would like to reproduce the following image with CSS:
Especially important is to me that both lines have equal length:
I tried to recreate it with this code (jFiddle):
.box {
font-family: "Open Sans";
line-height: 28px;
font-weight: 700;
background-color: #2c343c;
margin: 20px;
padding: 20px;
width: 150px;
text-align: justify;
}
.box .name {
color: #fff;
font-size: 24px;
}
.box .sub {
color: #f29400;
font-size: 15px;
letter-spacing: 1px;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="box">
<span class="name">Dr. Nielsen</span><br>
<span class="sub">WEBDEVELOPER
</div>
But its not quite perfect:
Is there a good way how to achieve this with CSS so that both lines get the same lengths on any device. Or is it recommended to rather use a picture for this?
You can give a try to text-align-last:justify;
Beside, to avoid setting a width, you may turn the box into a block that shrinks on its content via display:table; . You can also avoid the <br> setting spans into blocks
.box {
font-family: "Open Sans";
line-height: 28px;
font-weight: 700;
background-color: #2c343c;
margin: 20px;
padding: 20px;
display: table;
text-align: justify;
}
span {
display: block;
text-align-last: justify;
}
.box .name {
color: #fff;
font-size: 24px;
}
.box .sub {
color: #f29400;
font-size: 15px;
letter-spacing: 1px;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="box">
<span class="name">Dr. Nielsen</span>
<span class="sub">WEBDEVELOPER</span>
</div>
<div class="box">
<span class="name">Dr. Nielsen</span>
<span class="sub">WEB-DEVELOPPER</span>
</div>
<div class="box">
<span class="name">Watch Out when top too long</span>
<span class="sub">single-short-breaks!</span>
</div>
You should remove the text-align: justify; on the container (.box) and give .name some extra letter-spacing so the 2 lines line up.
Be aware that this would be completely dependent on the font settings. Another font-family, size, etc. would change the size of both lines and make it different again. If people visiting your website changed their browser font size, then they won't see exactly what you see. If you want to avoid this (as much as possible) then look into font-size resets.
.box {
font-family: "Open Sans";
line-height: 28px;
font-weight: 700;
background-color: #2c343c;
margin: 20px;
padding: 20px;
width: 150px;
}
.box .name {
color: #fff;
font-size: 24px;
letter-spacing: .3px;
/* added */
}
.box .sub {
color: #f29400;
font-size: 15px;
letter-spacing: 1px;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="box">
<span class="name">Dr. Nielsen</span>
<span class="sub">WEBDEVELOPER</span>
</div>

Moving text up towards <h1> in CSS

I am trying to move this paragraph header up towards my h1. I don't really understand how to incorporate the position function. I have tried to use padding but it doesn't work.
ok so in the picture I am trying to get the " where every connections matters" right below the "Boblo"
The bottom is my HTML code
.jumbotron h1 {
text-align: left;
color: white;
font-size: 60px;
font-family: 'Shift', sans-serif;
font-weight: bold;
padding-top:20px;
padding-bottom:5px
}
.jumbotron p {
font-size: 30px;
color: white;
font-weight: bold;
text-align: left;
}
<div class="jumbotron">
<div class="container">
<h1>BOBLO</h1>
<p>Where every connection matters</p>
You can add a class to h1 and remove the margin-bottom, please see and try the code below. You can take my implementation and adapt to suit your needs.
HTML:
<h1 class="test">TEST HEADING</h1>
<header>HEADER</header>
CSS:
.test{
margin-bottom: 0 !important;
}
Hope this helps!
If you use Bootstrap (I guess), than you have to set <h1>tag the margin-bottom and padding-bottom to zero.
.jumbotron .container h1 {
text-align: left;
color: white;
font-size: 60px;
font-family: 'Shift', sans-serif;
font-weight: bold;
padding-top:20px;
padding-bottom:5px;
margin-bottom: 0;
padding-bottom: 0;
}
.jumbotron .container p {
font-size: 30px;
color: white;
font-weight: bold;
text-align: left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
<div class="container">
<h1>BOBLO</h1>
<p>Where every connection matters</p>
</div>
</div>
If the gap between <h1> and <p> again to large you can fix this with line-height.
I hope this will help you.
Removing the margin and padding in h1 is probably the cleanest solution. But sometimes that doesn't work, I then just always apply position:relative; top:-20px;. This moves the element 20px up from the position where it normally would have been:
.jumbotron .container h1 {
text-align: left;
color: white;
font-size: 60px;
font-family: 'Shift', sans-serif;
font-weight: bold;
padding-top:20px;
padding-bottom:5px;
}
.jumbotron .container p {
font-size: 30px;
color: white;
font-weight: bold;
text-align: left;
position:relative;
top:-20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
<div class="container">
<h1>BOBLO</h1>
<p>Where every connection matters</p>
</div>
</div>

Resources