I am trying to make cards highlighting projects for a test portfolio. When I work on it in Codepen on my desktop it looks fine, but when I look on mobile the project images are poking through the bottom. Setting a bottom left and right margin to match the bottom of the card works on mobile but then it is formatted wrong on desktop.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #143861;
}
.section-header {
color: white;
font-size: 20px;
text-align: center;
backgroun-color: ;
}
.grid-wrapper {
display: grid;
height: 100vh;
width: 100vw;
grid-template-rows: .5fr 1fr 4fr 1fr;
grid-template-columns: minmax(0, 1fr);
overflow: auto;
text-align: center;
}
.header {
display: flex;
align-items: center;
}
.profile-image {
left: 0;
}
.about {
margin-top: 20rem;
margin-bottom: 20rem;
margin-left: 40px;
margin-right: 40px;
text-align: left;
color: white;
font-size: 20px;
}
.nav {
display: flex;
text-align: center;
gap: 2rem;
padding: 1rem;
position: fixed;
}
<DOCTYPE! html>
<html>
<body>
<div class="grid-wrapper">
<div class="header">
<img id="profile-image" src="https://via.placeholder.com/140x100"></img>
<div class="nav">
<div class="nav-links">About</div>
<div class="nav-links">Projects</div>
<div class="nav-links">Contact</div>
</div>
</div>
<section id="about">
<div class="about">
<h1 class="section-header">About</h1><br>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed felis quam, cursus vel scelerisque eu, sollicitudin ac neque. Mauris in dui a lacus rutrum bibendum et at turpis. Curabitur velit felis, consequat vel leo in, molestie egestas arcu. Aenean condimentum,
est nec viverra suscipit, nibh dui fermentum justo, eget eleifend turpis felis interdum nulla. Etiam eros turpis, faucibus ac fermentum a, sodales a lacus. Praesent vulputate, justo tristique mattis feugiat, ipsum nunc commodo turpis, in euismod
sem quam sit amet augue. Donec iaculis malesuada hendrerit. Proin venenatis, nibh in pulvinar sollicitudin, dui dui placerat metus, eu sodales tellus sapien ut urna. Phasellus et ipsum accumsan, pulvinar felis vitae, maximus metus. Vestibulum
sodales rhoncus enim, ut convallis massa scelerisque id. Nunc venenatis lacus eu finibus vulputate. Proin tincidunt turpis at ipsum porttitor varius. Sed accumsan arcu in odio dapibus, nec elementum dolor feugiat.
</p>
</div>
<section id="projects">
<h1 class="section-header">Projects</h1>
<div class="content">
<div class="project">
<img src="https://content.syndigo.com/asset/56a5cb78-9825-423a-a9df-fa0f5f2438f7/480.jpeg" alt="project image" class="project-image"></img>
<a class="project-link" href="https://codepen.io/nanglewi/full/qBVENGg" target="_blank">Cherry MX Product Landing Page</a>
</div>
Related
I have created the layout using the flexbox. I have an image and some text in the footer. But when I am zooming out or in the browser to check for responsiveness the image in the footer is going out.
This is what happens when the browser window size is decreased.
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: "Lato", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: 400;
letter-spacing: 0;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-font-feature-settings: "liga" on;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
.container {
display: flex;
height: 100vh;
}
.sidebar {
flex: 1;
}
.content {
-webkit-flex: 5;
flex: 5;
background-color: lightblue;
}
.main {
padding: 1rem;
height: 70vh;
background-color: #ececec;
overflow-y: scroll;
}
.header,
.footer {
display: flex;
align-items: center;
height: 15vh;
}
header,
footer,
article,
nav,
aside {
padding: 1em;
}
.player {
border: 1px solid red;
}
.player {
display: flex;
align-items: center;
}
.album__cover>img {
width: 3.5rem;
height: 3.5rem;
}
.album__cover {
display: flex;
align-items: center;
margin-right: 1rem;
}
.playing__track {
display: flex;
flex-direction: column;
}
.playing__album {
display: flex;
align-items: center;
}
.album {
font-size: .875rem;
font-weight: 300;
}
.track {
font-size: .75rem;
}
<link
href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
rel="stylesheet">
<body>
<div class="container">
<nav class="sidebar">
<a>Logo Goes Here</a>
</nav>
<div class="content">
<header class="header">Header</header>
<main class="main">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mattis auctor sem, vitae
scelerisque eros feugiat non. Mauris sit amet arcu sed ligula pellentesque tempus non imperdiet
elit. Aliquam dapibus metus ac odio facilisis, vitae bibendum quam lacinia. Phasellus a ante ut
justo dictum bibendum et ut massa. Etiam hendrerit sapien venenatis lacinia sodales. In et massa
leo. Integer imperdiet orci ac scelerisque malesuada. Donec mattis velit nec elit tincidunt mattis.
Proin vel varius felis, vel scelerisque mauris. Nunc malesuada purus velit, eu euismod tellus
consectetur et.
</p>
<p>
Quisque tincidunt nisi non dolor porttitor maximus. Donec tempus auctor leo vitae maximus. Sed
mattis nibh velit, iaculis molestie massa tempus vitae. Aliquam ipsum sem, ornare condimentum magna
vitae, auctor sagittis odio. Duis ut urna vel est luctus suscipit. Suspendisse at aliquet metus, in
rhoncus ligula. Aliquam erat volutpat. Nullam ultricies elit vel eros convallis, ut suscipit erat
mattis. In hac habitasse platea dictumst.
</p>
<p>
Ut enim diam, auctor eu turpis non, egestas accumsan dui. Suspendisse vel lorem tempor, imperdiet
purus vel, tincidunt turpis. Praesent sit amet lacus vel enim iaculis egestas vitae eget nibh. Donec
consequat placerat odio, in laoreet magna pretium ac. Curabitur porttitor a elit sed scelerisque.
Curabitur laoreet eu nisi ac ornare. Cras ornare, metus ut vestibulum rhoncus, purus arcu lobortis
odio, ac iaculis urna mi ut ex. Maecenas vitae dolor non felis rhoncus imperdiet a vitae enim.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur eget condimentum dolor. Duis
lacinia libero quis lacinia lacinia. Ut pretium pulvinar vestibulum. Ut blandit eget tellus sit amet
ornare.
</p>
</main>
<footer class="footer">
<div class="player">
<div class="playing__album">
<div class="album__cover">
<img src="https://images.pexels.com/photos/1051838/pexels-photo-1051838.jpeg?cs=srgb&dl=pexels-prasanth-inturi-1051838.jpg" />
</div>
<div class="playing__track">
<div class="album">
Last and the first freedom
</div>
<div class="track">
<span> Chapter 1</span>
</div>
</div>
</div>
</div>
</footer>
</div>
</div>
</body>
How can I keep the image precisely inside the footer with the same padding and orientation?
You need to get rid of the fixed height and control the image it's width and height if you want the footer to be either bigger of smaller.
This is the solution
.header, .footer {
display: flex;
align-items: center;
/* height: 15vh; */
background-color: lightblue;
}
I think the issue is the units used for the padding, image size and font size. If you try using the vh unit instead of the rem unit, you might hav success.
.album__cover>img {
width: 3.5rem;
height: 3.5rem;
}
footer {
height: 10vh;
}
.album,
.track {
.album {
font-size: 0.875rem;
}
I'm working on this webpage for a static site and my goal is to be able have multiple modals open at once. So far, I've gotten it where I want it, but I ran into some hiccups.
My main challenges are:
Each button opens up both dialogs simultaneously and closing one closes the other.
When I click on the dialog to drag, it jumps several pixels from where I clicked.
I have some other goals like animating and having the active dialog sit above others like an active window, but that's kinda beyond the scope of my main problem here for the moment.
For the first problem, I'm pretty sure I have to change my scripting a lot, but I have no idea where to start.
For the second problem, I'm pretty sure it's a problem with my html or css overall, but after testing each and every line, I still can't seem to find the problem. I am definitely missing something. Maybe it's too much to ask for someone to comb through my code, but I've included all of it in this post to give y'all the most accurate example.
Just FYI, I'm using jquery-ui v1.12.1 with no theme. Here's the JSFiddle: https://jsfiddle.net/puncushion/9tke3grp/
And here's the code below.
html:
<!DOCTYPE html>
<html>
<head>
<title>Test Project</title>
<link rel="stylesheet" href="css/stylesheet.css">
<script src="js/jquery/jquery.js" type="text/javascript"></script>
<script src="js/jqueryui/jquery-ui.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="title">
TEST
PROJECT
</div>
<div class="menu">
ABOUT
2019
2020
2021
</div>
<div class="content">
<button class="click">Content 1</button>
<div class="modal" id="modal-1">
<div class="modal-header">
<div class="modal-title">Content 1</div>
<button class="close-button">×</button>
</div>
<div class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ullamcorper, nisi ac dignissim venenatis, felis nibh luctus neque, a dictum sem risus sed mi. Mauris eu justo est. Donec sagittis, dui at efficitur aliquam, risus neque rutrum arcu, id varius ligula odio non enim. Maecenas ut odio vel dui dapibus venenatis. Etiam justo massa, consectetur ut nunc et, cursus condimentum metus. Suspendisse condimentum, ante molestie convallis semper, nunc felis dapibus ante, eget facilisis magna ex sit amet lacus. In auctor sit amet velit id ultrices. Suspendisse potenti. Sed dapibus, massa eget egestas luctus, massa neque luctus mi, dictum dignissim urna neque eu urna. Proin efficitur, ligula sit amet fringilla malesuada, tortor eros ullamcorper ligula, at vestibulum lacus erat et turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse luctus bibendum ligula, eget vehicula risus finibus eu. Morbi in feugiat orci. Curabitur pharetra lacinia erat non dignissim. Donec vitae ipsum at augue venenatis tempus in at purus. Aenean varius eros dui, sit amet porttitor tellus condimentum quis.
</div>
</div>
<button class="click">Content 2</button>
<div class="modal" id="modal-2">
<div class="modal-header">
<div class="modal-title">Content 2</div>
<button class="close-button">×</button>
</div>
<div class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ullamcorper, nisi ac dignissim venenatis, felis nibh luctus neque, a dictum sem risus sed mi. Mauris eu justo est. Donec sagittis, dui at efficitur aliquam, risus neque rutrum arcu, id varius ligula odio non enim. Maecenas ut odio vel dui dapibus venenatis. Etiam justo massa, consectetur ut nunc et, cursus condimentum metus. Suspendisse condimentum, ante molestie convallis semper, nunc felis dapibus ante, eget facilisis magna ex sit amet lacus. In auctor sit amet velit id ultrices. Suspendisse potenti. Sed dapibus, massa eget egestas luctus, massa neque luctus mi, dictum dignissim urna neque eu urna. Proin efficitur, ligula sit amet fringilla malesuada, tortor eros ullamcorper ligula, at vestibulum lacus erat et turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse luctus bibendum ligula, eget vehicula risus finibus eu. Morbi in feugiat orci. Curabitur pharetra lacinia erat non dignissim. Donec vitae ipsum at augue venenatis tempus in at purus. Aenean varius eros dui, sit amet porttitor tellus condimentum quis.
</div>
</div>
</div>
</div>
</body>
</html>
css:
html, body {
height: 100%;
margin: 0px;
background: #ecc;
font-family: sans-serif;
}
.container {
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
"title title title title subtitle menu"
". content content content . menu";
}
.title {
grid-area: title;
font-size: 2em;
font-weight: bold;
letter-spacing: 15px;
position: fixed;
}
#title-fn {
color: black;
text-decoration: none;
writing-mode: vertical-rl;
transform: rotate(180deg);
}
#title-ln {
color: black;
text-decoration: none;
position: fixed;
}
.menu {
grid-area: menu;
writing-mode: vertical-rl;
word-spacing: 50px;
position: fixed;
top: 50%;
left: 50%;
right: 2px;
transform: rotate(180deg);
transform: translate(0, -50%);
}
.content {
grid-area: content;
}
.click {
background-color: #ecc;
color: black;
cursor: pointer;
width: 100%;
border: none;
border-bottom: solid;
border-width: thin;
padding-top: .5rem;
padding-bottom: .5rem;
padding-left: 0rem;
text-align: left;
outline: none;
font-size: 1em;
}
.modal{
border:solid;
border-width: thin;
background-color: #ecc;
width: 300px;
max-height: 80%;
display:none;
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
.modal-header {
cursor: move;
padding: .5rem .5rem;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: solid;
border-width: thin;
}
.modal-header .close-button {
cursor: pointer;
border: none;
outline: none;
background: none;
font-size: 1.5rem;
}
.modal-body {
padding: .5rem .5rem;
max-height: calc(100vh - 210px);
overflow-y: auto;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #ecc;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
js:
$(document).ready(function(){
//draggable
$('.click').click(function(){
$('.modal').show();
$('.modal').draggable({handle:'.modal-header'});
});
$(".close-button").click(function(){
$(".modal").hide();
});
});
If I've understood well, what you want is each modal to be opened and closed separately, but being able to have both open at the same time.
Then you'll have to call the specific modal for each button clicked. Do so by calling the ".next" modal for opening (as they are immediate siblings), and ".closest" to `find the correct modal on close button click.
$(document).ready(function() {
$('.click').click(function() {
$(this).next('.modal').show();
$(this).next('.modal').draggable({
handle: '.modal-header'
});
});
$(".close-button").click(function() {
$(this).closest(".modal").hide();
});
});
Here you have the working JSFiddle: https://jsfiddle.net/Bettylex/4xcq0f2a/3/
I'm trying to replicate the sections on the following page
I'm using flexbox in my version, however my version using flexbox seems to adjust to smaller screen sizes differently. For example the original that I'm trying to copy eats into the margin first as the screen gets smaller before adjusting the size of the text and images. When it does adjust the size of the the text and image it seems to do it a way that's a lot more asthetically pleasing. Once the screen size hits 960px wide I'm going to use media queries to set flexbox to block. However I'd like the text and images to adjust the same was the originally between 1440px and 960px. I've recorded a video to show what I mean - https://youtu.be/1pKq_UW-3Hk
And here's my code...
.section3-h1 {
font-size: 3.125rem;
font-family: "Roboto";
}
button {
width: 176px;
height: 47px;
background: #6442ff;
color: #ffffff;
font-family: "Roboto";
font-size: 12px;
line-height: 18px;
align-items: center;
border: none;
}
.section2-head {
margin: 150px;
margin-top: 50px;
margin-bottom: 50px;
display: flex;
flex-flow: row wrap-reverse;
}
.section2-text {
max-width: 537px;
margin-right: 74px;
}
.button {
margin-top: 60px;
}
.section3-head {
margin: 150px;
margin-top: 50px;
margin-bottom: 50px;
display: flex;
flex-flow: row wrap;
}
.section3-text {
max-width: 537px;
margin-left: 74px;
font-family: "Roboto";
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<section id="section2">
<header class="section2-head">
<div class="section2-text">
<h1 class="section2-h1"> Lorem ipsum dolor sit ame.
</h1>
<p>Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
<button class="button">READ MORE</button>
</div>
<img src="https://via.placeholder.com/528x396" alt="" class="section2-img">
</header>
</section>
<section id="section3">
<header class="section3-head">
<img src="https://via.placeholder.com/528x396" alt="" class="section3-img">
<div class="section3-text">
<h1 class="section3-h1"> Lorem ipsum dolor sit ame.
</h1>
<p>Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
<button class="button">READ MORE</button>
</div>
</header>
</section>
</body>
</html>
Here is your code completely rewritten, removing all of the max-widths and unnecessary CSS. I added the media query for desktop styles as well.
button {
width: 176px;
height: 47px;
background: #6442ff;
color: #ffffff;
font-family: "Roboto";
font-size: 12px;
line-height: 18px;
align-items: center;
border: none;
}
section {
margin: 0 20px;
max-width: 1170px;
padding: 50px 0;
}
section header {
display: flex;
flex-direction: column;
}
section header .text {
margin: 30px 0 0 0;
}
section header img {
display: block;
width: 100%;
height: auto;
}
section.reverse header .text {
order: 2;
}
section.reverse header img {
order: 1;
}
#media (min-width: 992px) {
section {
margin: 40px auto;
}
section header {
flex-direction: row;
flex-wrap: nowrap;
}
section header .text {
flex: 0 0 calc(50% - 30px);
margin: 0 0 0 30px;
}
section header img {
flex: 0 0 calc(50% - 30px);
margin: 0 30px 0 0;
}
section.reverse header .text {
margin: 0 30px 0 0;
order: 1;
}
section.reverse header img {
order: 2;
margin: 0 0 0 30px;
}
}
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap" rel="stylesheet">
<div class="container">
<section id="section2" class="reverse">
<header class="section2-head">
<div class="section2-text text">
<h1 class="section2-h1"> Lorem ipsum dolor sit ame.
</h1>
<p>Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia
nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
<button class="button">READ MORE</button>
</div>
<img src="https://via.placeholder.com/528x396" alt="" class="section2-img">
</header>
</section>
</div>
<div class="container">
<section id="section3">
<header class="section3-head">
<img src="https://via.placeholder.com/528x396" alt="" class="section3-img">
<div class="section3-text text">
<h1 class="section3-h1"> Lorem ipsum dolor sit ame.
</h1>
<p>Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia
nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
<button class="button">READ MORE</button>
</div>
</header>
</section>
</div>
I've observed that you have written so much redundant code in here. I have reframed you code.
please refer the code below. I have changed all classes and structure to reduce stylesheet overhead.
* {
font-family: "Roboto";
}
.button {
width: 176px;
height: 47px;
background: #6442ff;
color: #ffffff;
font-family: "Roboto";
font-size: 12px;
line-height: 18px;
align-items: center;
border: none;
margin-top: 60px;
}
.container {
width: 90%;
margin: 0 auto;
}
.flexbox {
display: flex;
flex-grow: 1;
flex-basis: 0;
}
.flexbox * {
width: 100%;
}
.marr74 {
margin-right: 74px;
}
.marl74 {
margin-left: 74px;
}
.flex-image img {
width: 100%;
}
.heading {
font-size: 3.125rem;
}
#media only screen and (max-width: 764px){
.flexbox {
flex-direction: column;
}
}
And here is HTML
<section>
<div class="container">
<div class="flexbox">
<div class="flex-content marr74">
<p class="heading">Lorem ipsum dolor sit ame. </p>
<p>Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
READ MORE
</div>
<div class="flex-image"><img src="https://via.placeholder.com/528x396" alt="" class="section2-img"></div>
</div>
<div class="flexbox">
<div class="flex-image"><img src="https://via.placeholder.com/528x396" alt="" class="section2-img"></div>
<div class="flex-content marl74">
<p class="heading">Lorem ipsum dolor sit ame. </p>
<p>Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
READ MORE
</div>
</div>
</div>
</section>
Also note that you should not use more than one h1 on one single page. This affects the SEO of your website. Instead use p or similar element with font-size to achieve large fonts.
I'm trying to align a div at the bottom right corner inside a specific column, but all instead it aligns at the bottom right corner of the main parent.
https://jsfiddle.net/jonnijonnason/L9vg468g/
If you check the fiddle, I want it to align beneath the image.
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width" />
<title>Arbetsprov | Baldvin Haraldsson</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<div class="page">
<div class="row">
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue enim sed tristique interdum. Integer id lectus et risus pulvinar ornare. Donec congue tortor non risus ullamcorper vestibulum. Nullam in hendrerit tellus. Vestibulum lorem nulla, maximus non pretium a, tincidunt id quam. Donec quis sollicitudin urna, sed sagittis purus. Pellentesque sapien libero, blandit a nunc in, iaculis viverra ipsum</p>
</div>
<div class="item">
<p>Nullam maximus pretium arcu at sodales. Sed id venenatis ante. Nullam sollicitudin id nisl quis dictum. Duis imperdiet diam at nibh laoreet egestas. Integer volutpat, dolor a pulvinar mollis, nisl lorem hendrerit tortor, sit amet posuere ante odio quis lorem. Vivamus luctus sem quis eros elementum pretium. Sed facilisis sem at velit euismod pretium. Maecenas posuere sapien elit, at accumsan orci pretium non. Suspendisse id sem nisi.</p>
</div>
<div class="item">
<H3>Image</H3>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Stockholm_Port.jpg" width="140px" height = "140px" />
Donec bibendum nibh a odio venenatis, vel ultricies turpis varius. Vestibulum varius sollicitudin rutrum. Nam eleifend ac nisl non aliquet. Donec vel scelerisque sapien. Donec ultrices vel neque ut bibendum. Suspendisse bibendum, ex sed congue dapibus, nibh magna malesuada dolor, at scelerisque dolor ex quis lectus. Curabitur rhoncus elit efficitur hendrerit malesuada. Morbi condimentum convallis laoreet.
<div class = "foo">Read More</div>
</div>
</div>
</div>
</body>
</html>
CSS
#charset "UTF-8";
.item {
width: 33%;
background: rgba(0, 0, 0, 0.1);
display: table-cell;
}
.row {
border: 1px solid red;
display: table;
border-spacing: 20px;
}
.page {
max-width: 900px;
margin: 0px auto 0px auto;
position: relative;
background-color: #fff;
}
img {
float: right;
margin: 0 0 10px 10px;
padding: 10px;
}
.foo {
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif";
color: #fff;
text-align: center;
vertical-align: middle;
line-height: 50px;
background-color: #4a4a4a;
height: 50px;
width: 162px;
position: absolute;
bottom: 0;
right: 0;
}
Add to <div class="item"> column a position:relative;
The button inside has an absolute position so it is relative to the next parent element with relative (or absolute) positioning.
Also, to make it not overlap the text you can also set padding-bottom
.item.contains-button {
position:relative;
padding-bottom:60px;
}
Your updated JSFiddle
What you need to do is just add Position: relative; to the last column. This will make Read more div to be at bottom right corner of the direct parent DIV instead of the main DIV.
Updated jsFiddle: https://jsfiddle.net/L9vg468g/4/
HTML:
<body>
<div class="page">
<div class="row">
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue enim sed tristique interdum. Integer id lectus et risus pulvinar ornare. Donec congue tortor non risus ullamcorper vestibulum. Nullam in hendrerit tellus. Vestibulum lorem nulla, maximus non pretium a, tincidunt id quam. Donec quis sollicitudin urna, sed sagittis purus. Pellentesque sapien libero, blandit a nunc in, iaculis viverra ipsum</p>
</div>
<div class="item">
<p>Nullam maximus pretium arcu at sodales. Sed id venenatis ante. Nullam sollicitudin id nisl quis dictum. Duis imperdiet diam at nibh laoreet egestas. Integer volutpat, dolor a pulvinar mollis, nisl lorem hendrerit tortor, sit amet posuere ante odio quis lorem. Vivamus luctus sem quis eros elementum pretium. Sed facilisis sem at velit euismod pretium. Maecenas posuere sapien elit, at accumsan orci pretium non. Suspendisse id sem nisi.</p>
</div>
<div class="item lastcol">
<H3>Image</H3>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Stockholm_Port.jpg" width="140px" height = "140px" />
Donec bibendum nibh a odio venenatis, vel ultricies turpis varius. Vestibulum varius sollicitudin rutrum. Nam eleifend ac nisl non aliquet. Donec vel scelerisque sapien. Donec ultrices vel neque ut bibendum. Suspendisse bibendum, ex sed congue dapibus, nibh magna malesuada dolor, at scelerisque dolor ex quis lectus. Curabitur rhoncus elit efficitur hendrerit malesuada. Morbi condimentum convallis laoreet.
<div class = "foo">Read More</div>
</div>
</div>
</div>
</body>
CSS:
#charset "UTF-8";
.item {
width: 33%;
background: rgba(0, 0, 0, 0.1);
display: table-cell;
position: relative;
}
.item.lastcol {
position: relative;
}
.row {
border: 1px solid red;
display: table;
border-spacing: 20px;
}
.page {
max-width: 900px;
margin: 0px auto 0px auto;
position: relative;
background-color: #fff;
}
img {
float: right;
margin: 0 0 10px 10px;
padding: 10px;
}
.foo {
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif";
color: #fff;
text-align: center;
vertical-align: middle;
line-height: 50px;
background-color: #4a4a4a;
height: 50px;
width: 162px;
position: absolute;
bottom: 0;
right: 0;
}
As you have placed other two columns description inside paragraph tag, you can keep third description also inside a paragraph and it can be achievable by using css flexbox if your browser support is IE10 +.
Updated code below.
.item {
width: 33%;
background: rgba(0, 0, 0, 0.1);
display: table-cell;
display: flex;
flex-direction: column;
}
.row {
border: 1px solid red;
display: flex;
flex-direction: row;
flex-wrap: wrap;
border-spacing: 20px;
}
.page {
max-width: 900px;
margin: 0px auto 0px auto;
position: relative;
background-color: #fff;
}
img {
float: right;
margin: 0 0 10px 10px;
padding: 10px;
}
.foo {
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif";
color: #fff;
text-align: center;
vertical-align: middle;
line-height: 50px;
background-color: #4a4a4a;
height: 50px;
width: 162px;
position: relative;
bottom: 0;
right: 0;
}
.item h3 {
order: 1;
}
.item img {order: 2;}
.item div {order: 3;}
.item p {order: 4;}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width" />
<title>Arbetsprov | Baldvin Haraldsson</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<div class="page">
<div class="row">
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue enim sed tristique interdum. Integer id lectus et risus pulvinar ornare. Donec congue tortor non risus ullamcorper vestibulum. Nullam in hendrerit tellus. Vestibulum lorem nulla, maximus non pretium a, tincidunt id quam. Donec quis sollicitudin urna, sed sagittis purus. Pellentesque sapien libero, blandit a nunc in, iaculis viverra ipsum</p>
</div>
<div class="item">
<p>Nullam maximus pretium arcu at sodales. Sed id venenatis ante. Nullam sollicitudin id nisl quis dictum. Duis imperdiet diam at nibh laoreet egestas. Integer volutpat, dolor a pulvinar mollis, nisl lorem hendrerit tortor, sit amet posuere ante odio quis lorem. Vivamus luctus sem quis eros elementum pretium. Sed facilisis sem at velit euismod pretium. Maecenas posuere sapien elit, at accumsan orci pretium non. Suspendisse id sem nisi.</p>
</div>
<div class="item lastcol">
<H3>Image</H3>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Stockholm_Port.jpg" width="140px" height = "140px" />
<p>Donec bibendum nibh a odio venenatis, vel ultricies turpis varius. Vestibulum varius sollicitudin rutrum. Nam eleifend ac nisl non aliquet. Donec vel scelerisque sapien. Donec ultrices vel neque ut bibendum. Suspendisse bibendum, ex sed congue dapibus, nibh magna malesuada dolor, at scelerisque dolor ex quis lectus. Curabitur rhoncus elit efficitur hendrerit malesuada. Morbi condimentum convallis laoreet.</p>
<div class = "foo">Read More</div>
</div>
</div>
</div>
</body>
</html>
My assignment requires me to have two tags on top of each other. but there is this annoying gap between the two that I would like to get rid of. Between the gap is the background image that does not look good with the rest of the website. Thanks to everyone that can help me.
#profileSection {
margin-top: 300px;
padding-right: 400px;
padding-left: 400px;
background-color: #F5F5F5;
height: auto;
width: 100%:
}
#profileTitle {
display: inline-block;
margin-top: 25px;
font-family: 'Francois One', sans-serif;
text-decoration: underline;
}
#profileDesc {
float: left;
width: 50%;
margin-top: 70px;
font-family: 'Open Sans', sans-serif;
}
#profilePic {
float: right;
margin-top: 70px;
width: 200px;
height: 200px;
}
#mainTitle {
text-align: center;
margin-top: 300px;
}
#skillsSection {
padding-right: 400px;
padding-left: 400px;
background-color: #181818;
}
<section>
<div id="profileSection">
<div class="row">
<div class="col-xs-4 col-sm-8 col-md-12">
<h1 id="profileTitle">About Me</h1>
<p id="profileDesc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu justo quam. Donec et magna ante. Integer ullamcorper sit amet erat a pharetra. Aliquam euismod, mauris sit amet ultricies sodales, purus enim dictum dui, in mattis quam ex non
neque. Suspendisse quis tristique tellus. Vestibulum dignissim eros non arcu sollicitudin, a auctor augue faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris sit amet dui pulvinar, interdum
arcu et, consequat dui. Fusce velit elit, molestie sed tincidunt eget, ornare in nibh. Nunc aliquet dapibus odio sit amet varius. Suspendisse nec ipsum odio. Morbi iaculis velit eget mi tristique dignissim. Donec rutrum gravida ex, vel molestie
sapien condimentum quis. Morbi convallis placerat eros ac volutpat.</p>
<img id="profilePic" src="pics/profilePicture.png" />
</div>
</div>
</div>
</section>
<section>
<div id="skillsSection">
<h1 id="skillsTitle">Skills</h1>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</section>
Thanks to anyone that can help
You should remove/override the top margin of the heading.
#skillsTitle {
margin-top: 0;
}