I have a styled div with left element (blue represents info message, red warning, etc.).
Everything looks fine if I have one line of error/info messages. But if there are multiple then this blue/red element doesn't fit the size of container. Probably because height is set manually.
Is there a way to fix it so that this blue element fills the complete size of the div.
.InfoRectangle {
width: 100%;
border-radius: 6px;
border: solid 1px #005ea5;
background-color: #fff;
display: flex;
align-items: center;
}
.InfoRectangle---Header {
width: 52px;
height: 66px;
padding: 12px 12px;
border-radius: 6px;
background-color: #005ea5;
display: flex;
align-items: center;
background-position: center !important;
background-repeat: no-repeat;
}
.Text {
margin: 16px 0 16px 20px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.33;
letter-spacing: normal;
color: #0d0d0d;
}
<div class="InfoRectangle">
<div class="InfoRectangle---Header">
</div>
<span class="Text">Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</div>
This CSS should be fine.
Just removed justify content and height:D
.InfoRectangle {
width: 100%;
border-radius: 6px;
border: solid 1px #005ea5;
background-color: #fff;
display: flex;
}
.InfoRectangle---Header {
width: 52px;
padding: 12px 12px;
border-radius: 6px;
background-color: #005ea5;
display: flex;
align-items: center;
background-position: center !important;
background-repeat: no-repeat;
}
.Text {
margin: 16px 0 16px 20px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.33;
letter-spacing: normal;
color: #0d0d0d;
}
<div class="InfoRectangle">
<div class="InfoRectangle---Header">
</div>
<span class="Text">Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</div>
Don't set your height in .InfoRectangle---Header and remove your align-items: center in your .InfoRectangle class.
Related
I need to cut responsive text on line 4, like this :
I did it like this:
$(".show-more").on('click', function(){
$('.text').css('display', 'block');
$(this).css('display', 'none');
return false;
});
.show-more{
position: absolute;
display: block;
padding:0;
margin: 0;
font-size: 11px;
line-height: 16px;
font-weight: 400;
border: none;
outline: none;
right: 0px;
height: 24px;
width: 93px;
text-align: left;
transform: translateY(-20px);
}
.text{
width: auto;
margin: 0 16px;
font-size: 11px;
line-height: 16px;
font-weight: 400;
margin-top: -33px;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<button class="show-more">... see-more</button>
I need to add a 'see more' link but at the end of the fourth line.
Currently, I added a button with the text and then placed it in absolute above the text.
I am looking for a 'cleaner' method because the text can be cut in the middle of a letter.
You can achieve this using only a link <a> element in your paragraph:
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
... see-more
</p>
I'm new in CSS. I want to move the box div below when the browser is getting smaller or all box position go back column position when the browser is in desktop size. I have added flex-wrap and flex-direction in my source code but nothing happens. I don't know what mistake that I make. Hope you guys can help me solve this problem.Thank you in advance.
* {
padding: 0;
margin: 0;
}
.container-top {
background-color: green;
color: white;
}
.container-top-context {
display: flex;
flex-direction: column;
align-items: center;
height: auto;
}
.container-top-context h1 {
font-size: 70px;
word-spacing: 0.3em;
}
.container-top-context h2 {
font-size: 20px;
word-spacing: 0.2em;
}
.logo {
background-color: yellow;
height: 100px;
width: 100px;
margin-bottom: 10px;
}
.container-testimony-context {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.box-1 {
flex: 1;
background-color: #EF5350;
color: #FFCDD2 padding:5px;
text-align: center;
}
.box-2 {
flex: 1;
background-color: #AB47BC;
color: #E1BEE7;
padding: 5px;
text-align: center;
}
.box-3 {
flex: 1;
background-color: #29B6F6;
color: #B3E5FC;
padding: 5px;
text-align: center;
}
.box-4 {
flex: 1;
background-color: #66BB6A;
color: #C8E6C9;
padding: 5px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>my flex box</title>
</head>
<body>
<div class="container-top">
<div class="container-top-context">
<h1>Road of Kalibaenan</h1>
<h2>Gives exact direction to unusual creatures</h2>
<div class="logo"></div>
</div>
</div>
<div class="container-testimony-context">
<div class="box-1">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. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="box-2">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. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="box-3">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. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="box-4">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. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</body>
</html>
It is flexing as intended, just one at a time and at a very small screen size.
To control this better and make the flex-direction switch at once try using a media query like the updated exampled below:
* {
padding: 0;
margin: 0;
}
.container-top {
background-color: green;
color: white;
}
.container-top-context {
display: flex;
flex-direction: column;
align-items: center;
height: auto;
}
.container-top-context h1 {
font-size: 70px;
word-spacing: 0.3em;
}
.container-top-context h2 {
font-size: 20px;
word-spacing: 0.2em;
}
.logo {
background-color: yellow;
height: 100px;
width: 100px;
margin-bottom: 10px;
}
.container-testimony-context {
display: flex;
flex-wrap: wrap;
}
.box-1 {
flex: 1;
background-color: #EF5350;
color: #FFCDD2 padding:5px;
text-align: center;
}
.box-2 {
flex: 1;
background-color: #AB47BC;
color: #E1BEE7;
padding: 5px;
text-align: center;
}
.box-3 {
flex: 1;
background-color: #29B6F6;
color: #B3E5FC;
padding: 5px;
text-align: center;
}
.box-4 {
flex: 1;
background-color: #66BB6A;
color: #C8E6C9;
padding: 5px;
text-align: center;
}
#media screen and (max-width: 600px) {
.container-testimony-context {
flex-direction: column;
}
}
<!DOCTYPE html>
<html>
<head>
<title>my flex box</title>
</head>
<body>
<div class="container-top">
<div class="container-top-context">
<h1>Road of Kalibaenan</h1>
<h2>Gives exact direction to unusual creatures</h2>
<div class="logo"></div>
</div>
</div>
<div class="container-testimony-context">
<div class="box-1">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. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="box-2">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. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="box-3">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. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="box-4">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. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</body>
</html>
I'm having some trouble trying to align a button with the right side of a responsive div (I'm trying to make all my html responsive).
What I am achieving right now is this current example:
.container1 {
background-color: yellowgreen;
position: relative;
width: 100%;
height: 400px;
}
.container1-text1 {
position: absolute;
top: 50%;
left: 50%;
width: 40%;
-webkit-transform: translate(-105%, -50%);
-ms-transform: translate(-105%, -50%);
transform: translate(-105%, -50%);
background-color: orange;
padding: 1.2em;
}
.container1-text2 {
position: absolute;
top: 50%;
left: 50%;
width: 40%;
-webkit-transform: translate(5%, -50%);
-ms-transform: translate(5%, -50%);
transform: translate(5%, -50%);
background-color: fuchsia;
padding: 1.2em;
}
.custom-button-style {
float: right;
color: white;
padding: 10px 32px;
background-color: #D0D763;
border-radius: 8px;
cursor: pointer;
}
<div class="container1">
<div class="container1-text1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<div class="container1-text2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<a href="" target="_blank">
<div class="custom-button-style">BUTTON TEXT</div>
</a>
</div>
Fiddle of current example: http://jsfiddle.net/6zstozwf/
But what I would like to achieve is this:
To keep it short, I thought on wrapping both the button and the second "pink/fuchsia" div on a wrapper-div, but I didn't have success on it.
The main problem is, that you have your elements positioned absolute. That will break your layout especially on small devices.
There are a few solutions out there. This one down below is made with display: flex mainly. See comments in code for explanation.
*, *::before, *::after {
/* changing calculation of box model for all elements */
box-sizing: border-box;
}
body {
/* I guess your whole page should be green anyway.
Otherwise you can put this back to .container1 */
background-color: yellowgreen;
}
.container1 {
/* making the container kind of "flexible" */
display: flex;
/* spread elements from across width but leave a gap between them */
justify-content: space-between;
/* vertically align elements to the top */
align-items: flex-start;
/* when elements reach over a 100% wrap them to the next line */
flex-wrap: wrap;
/* vw means viewport width - similar to % */
padding: 5vw;
}
/* combine styles for both text elements */
.container1-text1, .container1-text2 {
width: 40vw;
padding: 1.2em;
}
.container1-text1 {
background-color: orange;
}
.container1-text2 {
background-color: fuchsia;
}
.button-container {
/* just an element spread to 100% width
all inline elements should be aligned to the right */
width: 100%;
text-align: right;
padding-top: 5vw;
}
.custom-button-style {
display: inline-block;
color: white;
padding: 10px 32px;
background-color: #D0D763;
border-radius: 8px;
}
<div class="container1">
<div class="container1-text1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<div class="container1-text2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<div class="button-container">
<a href="" target="_blank" class="custom-button-style">
BUTTON TEXT
</a>
</div>
</div>
You're having trouble because of your absolute positioning and your float. Both cause more trouble than they're worth. Look at inline-block and leave positioning static, then your anchor can flow below them as normal and be aligned right with text-align.
* {
box-sizing: border-box;
}
.container {
background-color: yellowgreen;
margin-bottom: 20px;
text-align: center;
}
.container > div {
display: inline-block;
width: 40%;
margin: 4.5%;
background-color: orange;
padding: 1.2em;
}
* {
box-sizing: border-box;
}
.container {
background-color: yellowgreen;
margin-bottom: 20px;
text-align: center;
}
.container > div {
display: inline-block;
width: 40%;
margin: 4.5%;
background-color: orange;
padding: 1.2em;
}
.container > div.text2 {
background-color: fuchsia;
}
.custom-button-style {
color: white;
padding: 10px 32px;
background-color: #D0D763;
border-radius: 8px;
cursor: pointer;
}
.text-right {
text-align: right;
}
.custom-button-style {
color: white;
padding: 10px 32px;
background-color: #D0D763;
border-radius: 8px;
cursor: pointer;
}
.text-right {
text-align: right;
}
<div class="container">
<div class="text1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<div class="text2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
</div>
<div class="text-right">
<a href="" target="_blank">
<span class="custom-button-style">BUTTON TEXT</span>
</a>
</div>
Fiddle
I am trying to align my avatar/logo with the website title (side by side). How would I accomplish this?
html {
background: #bdb4c1;
}
#logo {
width: 100px;
height: 100px;
}
hr {
border: 0;
color: red;
border-bottom: 1px solid #101010;
}
body {
max-width: 800px;
height: 1000px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background: #fafafa;
margin: auto;
padding: 20px;
}
h1, h3 {
font-weight: 700;
line-height: 1.5;
color: #272727;
}
p {
color: #383838;
}
<body>
<div id="title">
<img id="logo" src="http://i.imgur.com/nm1i0Yo.png" alt="some_text" style="width:width;height:height;">
<h1>JOSH BAKOS</h1>
</div>
<hr>
<h3>INFORMATION</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3>EXPERIENCE</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3></h3>
</body>
Your <img> and <h1> tag cannot be aligned because <h1> is a block element.
By default, block elements are displayed below the previous html element (i.e. below your <img> here).
There are many possible solutions. A simple one could be to move the <img> tag inside the <h1>:
<h1><img id="logo" src="http://i.imgur.com/nm1i0Yo.png" alt="some_text" style="width:width;height:height;">JOSH BAKOS</h1>
Another solution is to set the h1 inside the #title to inline-block (this way you can also control their vertical-alignment):
html {
background: #bdb4c1;
}
#logo {
width: 100px;
height: 100px;
}
hr {
border: 0;
color: red;
border-bottom: 1px solid #101010;
}
body {
max-width: 800px;
height: 1000px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background: #fafafa;
margin: auto;
padding: 20px;
}
#title * {
vertical-align: top;
}
#title h1 {
display: inline-block;
margin-top: 0;
}
h1, h3 {
font-weight: 700;
line-height: 1.5;
color: #272727;
}
p {
color: #383838;
}
<body>
<div id="title">
<img id="logo" src="http://i.imgur.com/nm1i0Yo.png" alt="some_text" style="width:width;height:height;">
<h1>JOSH BAKOS</h1>
</div>
<hr>
<h3>INFORMATION</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3>EXPERIENCE</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3></h3>
</body>
I've been trying to solve a number of issues for this questionnaire I'm making. I've reformatted this question because my old one was pretty confusing and I'm taking a new angle on the issue.
With the new code I've summited the problem is that the child div .question-container inside the .questionnaire-box is spilling out all the text past the set height. I prefer .question-container to have the same height as .questionnaire-box and scroll on overflow.
.questionnaire-container {
position: fixed;
width: 100%;
height: 100%;
padding: 2rem 0;
background-color: rgba(100, 100, 100, .1);
}
.questionnaire-box {
position: relative;
width: 80%;
max-height: 80%;
margin: 0 auto;
background-color: #ffffff;
}
.question-container {
max-height: 80%;
overflow-y: scroll;
}
.questionnaire-nav {
position: absolute;
bottom: 0;
width: 100%;
height: 55px;
border-top: 1px rgba(100, 100, 100, .3) solid;
background-color: #ffffff;
text-align: center;
}
button {
margin 1rem;
}
<html>
<body>
<div class="questionnaire-container">
<div class="questionnaire-box">
<div class="question-container">
<p>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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="questionnaire-nav">
<button>Submit</button>
</div>
</div>
</div>
</body>
</html>
This is what it looks like inside my app.
And this is what I'm trying to achieve.
The question is a little overly-complex, but I assume the problem here is that you're unable to scroll down and view all of the content in .question-container.
Does this work?
https://jsfiddle.net/tobyl/bemkkz72/
If so, the critical CSS is the additional padding-bottom in this block:
.questionnaire-box {
position: relative;
width: 80%;
max-height: 80%;
margin: 0 auto;
padding: 1.5rem 2rem 6rem 2rem;
border-radius: 20px;
background-color: #ffffff;
overflow: auto;
}
There were quite a few things I changed in your code for the snippet below - it will be too much to explain everything. Still, some of the most important changes:
No flexbox
Fixed element (nav) outside of the DIV above it
Look at the code. I can explain more, if this is what you are after, but not tonight (i.e. "good night" :-)...
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
.questionnaire-container {
width: 100%;
height: calc(100% -50px);
padding: 5rem 0;
background-color: rgba(255, 100, 100, .1);
}
.questionnaire-box {
width: 80%;
margin: 0 auto;
padding: 1.5rem 2rem;
border-radius: 20px;
background-color: #ffffff;
}
.question-container {
height: 100%;
margin-bottom: 55px;
padding: 3rem 4rem;
}
.questionnaire-nav {
position: fixed;
bottom: 0;
text-align: center;
width: 100%;
height: 30px;
border-top: 1px rgba(100, 100, 100, .3) solid;
background-color: #ffffff;
padding: 10px 0;
}
<html>
<body>
<div class="questionnaire-container">
<form class="questionnaire-box">
<div class="question-container">
<p>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. Duis aute irure dolor</p>
<p>in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>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. Duis aute irure dolor</p>
<p>in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<nav class="questionnaire-nav">
<button>Previous</button>
</nav>
</form></body>
</html>
Try to change these three things in .questionnaire-nav:
position to fixed
width to 75%
and deleted margin-left: -20px;
Does this work for you?
html, body {
max-height: 100%;
}
.questionnaire-container {
position: fixed;
width: 100%;
height: 100%;
padding: 5rem 0;
background-color: rgba(255, 100, 100, .1);
}
.questionnaire-box {
position: relative;
width: 80%;
max-height: 80%;
margin: 0 auto;
padding: 1.5rem 2rem;
border-radius: 20px;
background-color: #ffffff;
overflow: auto;
}
.question-container {
height: 100%;
margin-bottom: 55px;
padding: 3rem 4rem;
overflow-y: auto;
}
.questionnaire-nav {
display: flex;
position: fixed;
bottom: 0;
align-items: center;
justify-content: center;
width: 75%;
height: 55px;
border-top: 1px rgba(100, 100, 100, .3) solid;
background-color: #ffffff;
}
<html>
<body>
<div class="questionnaire-container">
<form class="questionnaire-box">
<div class="question-container">
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. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<nav class="questionnaire-nav">
<button>Previous</button>
</nav>
</form>
</div>
</body>
</html>