Why is the text p not moving up ?
I have tried to move it with: bottom, margin-bottom, padding-bottom. It moves only when I remove the bluePoint1 div.
.bluePoint1 {
left: -12px;
margin-right: 10px;
font-size: 3.75rem;
color: #5CABD1;
}
p {
font-family: Roboto, sans-serif;
font-size: 16px;
font-weight: normal;
text-align: center;
bottom: 1000px;
}
<div class="bluePoint1">&bull</div>
<p>Lorem Ipsum dolor sit amet, consecteur adipiscing elit, sed do elusmod tempor incididumt ut <br> et dolore magna aliqua. Ut enim ad minim veniam</p>
Hi add the following in you p tag in css:
margin-top: -20px;
The entire css will look like this:
.bluePoint1 {
left: -12px;
margin-right: 10px;
font-size: 3.75rem;
color: #5CABD1;
}
p {
font-family: Roboto, sans-serif;
font-size: 16px;
font-weight: normal;
text-align: center;
bottom: 1000px;
margin-top: -20px;
}
add margin:0 to your p element
JsFiddle
Related
I have no idea why my image is shifting when my webpage is resized. There is no absolute positioning, the image just floats left, and the parents only give it some padding and margin.
Here is the HTML:
.section-title {
color: black;
font-size: 30px;
font-weight: bold;
text-align: center;
}
.section-title-info {
margin-bottom: 1.5em;
margin-top: 0;
}
.section-words-info {
font-size: 20px;
color: black;
font-weight: 550;
line-height: 30px;
}
.section-info {
background-color: #706D9F;
padding: 2em 1em;
}
.container {
margin: 0 auto;
}
.img-main {
float: left;
height: 12em;
border-radius: 50%;
}
<section class="section-info container">
<h2 class="section-title section-title-info">Information</h2>
<img class="img-main" src="https://ibb.co/g7LnzSc">
<span class="section-words-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span>
</section>
You need to add overflow: auto; to your .section-info By using float it takes that element out of the flow of the document so you need to force the parent to include it by using overflow auto. See here:
.section-title {
color: black;
font-size: 30px;
font-weight: bold;
text-align: center;
}
.section-title-info {
margin-bottom: 1.5em;
margin-top: 0;
}
.section-words-info {
font-size: 20px;
color: black;
font-weight: 550;
line-height: 30px;
}
.section-info {
background-color: #706D9F;
padding: 2em 1em;
overflow: auto;
}
.container {
margin: 0 auto;
}
.img-main {
float: left;
height: 12em;
border-radius: 50%;
}
<section class="section-info container">
<h2 class="section-title section-title-info">Information</h2>
<img class="img-main" src="https://w3schools.com/html/img_girl.jpg" />
<span class="section-words-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span>
</section>
I have a specific box style that I'm trying to accomplish and it's got me stumped. Here is a reference image:
box with border and additional line styling
A few items, first and foremost, I'm beginning to learn responsive design and I've been able to accomplish this but as soon as I start to resize it breaks. I would like it the box and hr to work all as one item.
What I've tried:
- Box with border
- HR styled within the box div and outside
- HR with Z-Index
Here is the code:
#valuesContainer {
border: 1px;
border-style: solid;
border-color: #ccc;
font-family: sans-serif;
font: Source;
font-weight: normal;
font-size: 20px;
margin: 8%;
padding: 5%;
line-height: 1;
}
#valueTitle {
font-family: sans-serif;
font: Source;
font-weight: 600;
font-size: 22px;
}
#hrTop {
width: 30vh;
color: red;
border-top: 5px solid #E7503D;
position: relative;
margin-right: -.2%;
margin-top: -.75%;
z-index: 999;
}
#hrTopRight {
border: none;
border-left: 5px solid #E7503D;
height: 10vw;
width: 1px;
margin-top: -16%;
}
<div class="row">
<div class="col-6">
<div id="valuesContainer" class="box">
<hr id="hrTop"align="right">
<h1 id="valueTitle">Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Feugiat scelerisque varius morbi enim nunc.
</p>
<hr id="hrTopRight"align="right">
</div>
</div>
I'm not entirely sure I'm going about this the right way, but any help would greatly appreciate it. I have tried to search around and this is as far as I've been able to get with the information I found.'
UPDATE:
I couldn't see a way to award this answer since it was a comment. But I believe I may have found a much better way of doing this without using an HR tag.
t looks like you are using to decorate the box and not to indicate a separation in your content (since they are at the very start and end). You can use a pseudo-element on your #valuesContainer instead to layer a box on top with absolute positioning (make sure #valuesContainer is relatively positioned).
Try using position: absolute and relative on the parent div
#valuesContainer {
border: 1px;
border-style: solid;
border-color: #ccc;
font-family: sans-serif;
font: Source;
font-weight: normal;
font-size: 20px;
margin: 8%;
padding: 5%;
line-height: 1;
position: relative;
}
#valueTitle {
font-family: sans-serif;
font: Source;
font-weight: 600;
font-size: 22px;
}
#hrTop {
width: 30vh;
color: red;
border-top: 5px solid #E7503D;
position: absolute;
top: -17px;
right: -7px;
z-index: -999999;
}
#hrTopRight {
border: none;
border-left: 5px solid #E7503D;
height: 10vw;
width: 1px;
position: absolute;
top: -14px;
right: -8px;
}
<div class="row">
<div class="col-6">
<div id="valuesContainer" class="box">
<hr id="hrTop"align="right">
<h1 id="valueTitle">Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Feugiat scelerisque varius morbi enim nunc.
</p>
<hr id="hrTopRight"align="right">
</div>
</div>
When resizing the <p > tag breaks out of its parent <div>, how can I
make it responsive and stay in the <div> HTML code. That's what I
want to achieved with HTML and CSS: I tried to wrap everything in a div so I can control elements using absolute elements so I can center it in the middle.
Thank you in advance for your advices to help me make nicely written websites in the future.
#import url('https://fonts.googleapis.com/css?family=Didact+Gothic');
html,body {
height: 100%;
}
body {
margin: 0;
background-color: #eee;
}
header {
height: 100vh;
background-size: cover;
position: relative;
height: 100%;
background-image: url("/images/background.jpeg")
}
.text {
position: relative;
width: 100%;
height: 100%;
}
.text1 {
font-size: 35vh;
position:absolute;
top: 5%;
left: 5%;
color: #fff;
font-weight: bold;
margin: 0;
height: auto;
}
.text2 {
margin: 0;
font-size: 35vh;
position:absolute;
left:33%;
top: 40%;
font-size: 5vh;
text-transform: uppercase;
}
.text3 {
position:absolute;
left: 15%;
top: 50%;
width: 50vh;
height: auto;
margin: 0;
font-weight: 4vh;
font-weight: bold;
font-style: italic;
font-family: 'Didact Gothic', sans-serif;
color: #fff;
}
.text4 {
position:absolute;
left: 15%;
top: 65%;
margin: 0;
width: 50vh;
font-weight: bold;
font-style: italic;
color: #fff;
font-family: 'Didact Gothic', sans-serif;
}
<header id="showcase">
<div class="text">
<h1 class="text1">-20%</h1>
<h1 class="text2">Rabbat</h1>
<p class="text3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel facilisis volutpat est velit egestas dui.
</p>
<p class="text4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel facilisis volutpat est velit egestas dui.
</p>
</div>
</header>
Use this in your head tag, and try not to use absolute positions for inner controls
<style>
p{
work-break: break-all;
}
</style>
I'm working on my portfolio, and I'm trying to add some bio text. I want everything to be aligned with my name. I've been successful at making a short tagline line up, but when I add a block with a lot of text, everything aligns to that block, or to the parent.
How can I restrict the width of the parent ( to that of the headline
I've put together a Codepen to demonstrate what I mean.
I'd preferably like to do it without JS
Snippet (doesn't look great in the small window):
header {
display: inline-block;
width: 100%;
margin: 16px 0;
color: #333;
text-align: center;
}
header .header-contents {
margin: auto;
max-width: 920px;
}
header .header-contents .title {
display: inline-block;
font-family: sans-serif;
font-weight: 400;
font-size: 96px;
}
header .header-contents .tagline {
display: block;
text-align: right;
font-family: sans-serif;
font-weight: 300;
font-size: 36px;
}
header a {
color: black;
text-decoration: none;
}
header a:hover {
text-decoration: none;
}
.bio-text {
text-align: center;
font-family: sans-serif;
font-size: 18px;
line-height: 2em;
font-weight: 300;
margin: 16px auto;
}
<header>
<div class="header-contents">
<div class="title">
First Lastname
<div class="tagline">
Tagline goes here
</div>
<!-- putting .bio-text here moves the tagline to the right margin -->
</div>
<div class="bio-text" id="about">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim.</p>
</div>
</div>
</header>
Try to use flex:
HTML:
header {
display: flex;
flex-direction: row;
width: 100%;
margin: 16px 0;
color: #333;
text-align: center;
}
header .header-space {
flex: 1;
}
header .header-contents {
flex: 0;
margin: auto;
max-width: 960px;
}
header .header-contents .myname {
white-space: nowrap;
}
header .header-contents .title {
font-family: sans-serif;
font-weight: 400;
font-size: 96px;
}
header .header-contents .tagline {
display: block;
text-align: right;
font-family: sans-serif;
font-weight: 300;
font-size: 36px;
}
header a {
color: black;
text-decoration: none;
}
header a:hover {
text-decoration: none;
}
header .bio-text {
width: inherit;
text-align: center;
font-family: sans-serif;
font-size: 18px;
line-height: 2em;
font-weight: 300;
margin: 16px auto;
}
<header>
<div class="header-space"></div>
<div class="header-contents">
<div class="title">
<div class="myname">
First Lastname
</div>
<div class="tagline">Tagline goes here</div>
<div class="bio-text" id="about">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim.</p>
</div>
</div>
</div>
<div class="header-space"></div>
</header>
I have a section where I have floated content on the left and right. The left content is gonna be bigger that the right (on height) so I want the right content to be vertically centered/aligned to the left content. How can I make that ?
Example image:
The blue content is gonna be mostly h1 and p and the red one just one small image and 1-2 words below it.
Code:
.inner {
background: none repeat scroll 0 0 #FFFFFF;
max-width: 576px;
width: 100%;
padding: 37px 34px 37px 34px;
}
.leftSide {
width: 80%;
float: left;
border-right: 1px solid #f2f2f2;
}
.leftSide a h1 {
font-size: 20px;
color: #3c3c3c;
text-transform: none;
font-family: 'Open Sans light';
}
.leftSide span p {
font-size: 12px;
padding-top: 2px;
}
.leftSide .description {
font-size: 13px;
padding: 15px 0 25px 0;
color: #6a6868;
line-height: 1.4;
font-family: 'Open Sans';
}
.leftSide .button {
background-color: #8D1313;
border-radius: 3px;
color: #FFFFFF;
font-family: 'Open Sans light';
font-size: 13px;
margin-top: 20px;
padding: 7px 10px;
}
.rightSide {
float: right;
width: 15%;
height: 100%;
text-align: center;
}
.rightSide p {
text-align: center;
color: #565656;
font-size: 14px;
font-family: 'Open Sans';
}
<div class="inner clearfix">
<div class="leftSide">
<a href="#">
<h1>Jsut a simple Headline</h1>
</a>
<span>
<p> 15 April / 4 Comments / 434Views </p>
</span>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<a class="button" href="#">learn more...</a>
</div>
<div class="rightSide">
<img src="img/author.png" alt="author" />
<p>J.Smith</p>
</div>
</div>
I found a method that works. You will have to tweak it based on your code. JsFiddle here.
HTML:
<div id="myrow">
<div id="content">Content<br/>alpha</div>
<div id="rightside">Right Side</div>
</div>
CSS:
body {
font-family: sans-serif;
font-size: 20pt;
box-sizing: border-box;
}
#myrow {
vertical-align: middle;
width: 100%;
border: solid 1px black;
position: relative;
}
#myrow:after {
content: "";
display: table;
clear: both;
}
#content, #rightside {
display: inline-block;
float: left;
margin: 0 auto;
height: 3em;
text-align: center;
vertical-align: middle;
color: white;
}
#content {
width: 55%;
background-color: #307FFF;
line-height: 1.5em;
}
#rightside {
width 45%;
min-width: 45%;
background-color: #F56362;
line-height: 3em;
}
The line-height is what centers the text or image. You may need to adjust your line-heights to accommodate your content.