The problem is when I shrink the page to a certain point, the top of the <p> elements overflow, weirdly not the bottom. To be clear, I want neither to overflow.
Here's a JSFiddle link to it: https://jsfiddle.net/maep468x/1
You will see that when you run it and shrink the result window to about 350px, the <p> elements start overflowing.
I've tried removing my line-height and font-size properties from the .main-content rule, but it still overflows.
I'll put the code here aswell just in case
<main>
<div id="header-container">
<h1>My Life</h1>
</div>
<div class="main-container">
<div class="main-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at.
</p>
</div>
<div class="img-container"><img src="../img/background-3062024.jpg" alt="starry night sky" /></div>
</div>
<div class="main-container" id="right-side">
<div class="img-container"><img src="../img/bali-2975787.jpg" alt="Bali beach sunset" /></div>
<div class="main-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at.
</p>
</div>
</div>
<div class="main-container">
<div class="main-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at.
</p>
</div>
<div class="img-container"><img src="../img/bali-1514132_1920.jpg" alt="bali ricefield" /></div>
</div>
</main>
main {
background-color: rgba(0, 128, 0, 0.5);
}
#header-container {
display: flex;
width: 100%;
height: 200px;
justify-content: center;
align-items: center;
font-size: calc(5px + 2vw);
border-bottom: 2px solid #000;
background-image: url("../img/panoramic-3358822_1920.jpg");
background-size: cover;
text-shadow: 0.5px 0.25px 2px #d49522;
}
.main-container {
display: flex;
height: fit-content();
}
.main-content {
display: flex;
height: 400px;
font-family: Georgia;
font-size: calc(10px + 0.5vw);
line-height: 24px;
overflow-y: scroll;
padding: 10px;
background-color: rgba(0, 128, 0, 0.25);
}
.img-container {
min-width: 600px;
}
.img-container img {
max-width: 100%;
height: auto;
}
#media only screen and (max-width: 930px) {
.main-container {
flex-wrap: wrap;
}
.main-content {
align-items: center;
}
}
Change property align-items from align-items: center; to align-items: flex-start; and set height: auto for mobile screens.
main {
background-color: rgba(0, 128, 0, 0.5);
}
#header-container {
display: flex;
width: 100%;
height: 200px;
justify-content: center;
align-items: center;
font-size: calc(5px + 2vw);
border-bottom: 2px solid #000;
background-image: url("../img/panoramic-3358822_1920.jpg");
background-size: cover;
text-shadow: 0.5px 0.25px 2px #d49522;
}
.main-container {
display: flex;
height: fit-content();
}
.main-content {
display: flex;
height: 400px;
font-family: Georgia;
font-size: calc(10px + 0.5vw);
line-height: 24px;
overflow-y: scroll;
padding: 10px;
background-color: rgba(0, 128, 0, 0.25);
}
.img-container {
min-width: 600px;
}
.img-container img {
max-width: 100%;
height: auto;
}
#media only screen and (max-width: 930px) {
.main-container {
flex-wrap: wrap;
}
.main-content {
align-items: flex-start;
height: auto;
}
}
<main>
<div id="header-container">
<h1>My Life</h1>
</div>
<div class="main-container">
<div class="main-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at.
</p>
</div>
<div class="img-container"><img src="../img/background-3062024.jpg" alt="starry night sky" /></div>
</div>
<div class="main-container" id="right-side">
<div class="img-container"><img src="../img/bali-2975787.jpg" alt="Bali beach sunset" /></div>
<div class="main-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at.
</p>
</div>
</div>
<div class="main-container">
<div class="main-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis fermentum lectus vel consectetur. In hac habitasse platea dictumst. Aliquam suscipit vehicula hendrerit. Suspendisse a tristique nisi, eget hendrerit diam. Mauris cursus purus magna, a pharetra mi venenatis auctor. Etiam congue felis quis maximus ultrices. Duis quis libero libero. Proin et iaculis sapien. Quisque sodales augue urna, sed dapibus eros hendrerit ut. Cras ac leo odio. Sed quis ornare risus, ut pulvinar ipsum. Vestibulum interdum laoreet efficitur. Nulla facilisi. Suspendisse ullamcorper mi in risus congue vehicula. Aliquam erat volutpat. Etiam quis aliquet lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus purus ac tortor tempus iaculis. Integer ac tempus lorem. Donec euismod libero nibh. Suspendisse tincidunt nulla ligula, et blandit quam imperdiet at.
</p>
</div>
<div class="img-container"><img src="../img/bali-1514132_1920.jpg" alt="bali ricefield" /></div>
</div>
</main>
Related
I am using a 1400px header (the size of the width of my image). Because of my header my following text is not displayed instead of my page
body {
background-color: blue;
}
.infos {
display: flex;
justify-content: center;
color: white;
}
header {
width: 1400px;
height: 787px;
background-color: black;
}
<link href="https://unpkg.com/tailwindcss#%5E1.0/dist/base.min.css" rel="stylesheet" />
<header></header>
<div class="infos">
<p>soremm ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi mauris, lobortis eu rutrum in, tempor ac turpis. Donec hendrerit finibus leo vel iaculis. Suspendisse pretium sapien justo, at pulvinar elit egestas eu. Sed accumsan, lacus ac pharetra
iaculis, lorem nisl eleifend tellus, varius feugiat mauris leo sit amet nibh. Cras consectetur dictum ligula et interdum. Nulla facilisi. Sed eget erat a neque varius feugiat. Vivamus fermentum dapibus leo non convallis. Donec non purus quam. Etiam
ut turpis libero. Morbi ex orci, consequat pulvinar urna ac, blandit ultrices mi</p>
</div>
I tried flex, text align. Nothing to do I can not center my text in the middle of my page
Is this what you had in mind?
body {
background-color: blue;
}
.infos {
display: flex;
justify-content: center;
color: white;
width:1400px;
margin:0 auto;
}
header {
width: 1400px;
height: 787px;
background-color: black;
margin:0 auto;
}
<link href="https://unpkg.com/tailwindcss#%5E1.0/dist/base.min.css" rel="stylesheet" />
<header></header>
<div class="infos">
<p>soremm ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi mauris, lobortis eu rutrum in, tempor ac turpis. Donec hendrerit finibus leo vel iaculis. Suspendisse pretium sapien justo, at pulvinar elit egestas eu. Sed accumsan, lacus ac pharetra
iaculis, lorem nisl eleifend tellus, varius feugiat mauris leo sit amet nibh. Cras consectetur dictum ligula et interdum. Nulla facilisi. Sed eget erat a neque varius feugiat. Vivamus fermentum dapibus leo non convallis. Donec non purus quam. Etiam
ut turpis libero. Morbi ex orci, consequat pulvinar urna ac, blandit ultrices mi</p>
</div>
justify-content only has an effect if there's space left over after your flex items have flexed to absorb the free space. It doesn't align the text itself.
Change justify-content:center; to text-align:center;
For more info check out this answer
If you want to center every line of text to the center of parent element use
text-align: center
body {
background-color: blue;
}
header {
width: 1400px;
height: 787px;
background-color: black;
}
.infos {
text-align: center;
}
<link href="https://unpkg.com/tailwindcss#%5E1.0/dist/base.min.css" rel="stylesheet" />
<header></header>
<div class="infos">
<p>soremm ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi mauris, lobortis eu rutrum in, tempor ac turpis. Donec hendrerit finibus leo vel iaculis. Suspendisse pretium sapien justo, at pulvinar elit egestas eu. Sed accumsan, lacus ac pharetra
iaculis, lorem nisl eleifend tellus, varius feugiat mauris leo sit amet nibh. Cras consectetur dictum ligula et interdum. Nulla facilisi. Sed eget erat a neque varius feugiat. Vivamus fermentum dapibus leo non convallis. Donec non purus quam. Etiam
ut turpis libero. Morbi ex orci, consequat pulvinar urna ac, blandit ultrices mi</p>
</div>
Simplest way to center a div use using margin: auto
body {
background-color: blue;
}
header {
width: 1400px;
height: 787px;
background-color: black;
}
.infos {
width: 50%;
margin: auto;
}
<link href="https://unpkg.com/tailwindcss#%5E1.0/dist/base.min.css" rel="stylesheet" />
<header></header>
<div class="infos">
<p>soremm ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi mauris, lobortis eu rutrum in, tempor ac turpis. Donec hendrerit finibus leo vel iaculis. Suspendisse pretium sapien justo, at pulvinar elit egestas eu. Sed accumsan, lacus ac pharetra
iaculis, lorem nisl eleifend tellus, varius feugiat mauris leo sit amet nibh. Cras consectetur dictum ligula et interdum. Nulla facilisi. Sed eget erat a neque varius feugiat. Vivamus fermentum dapibus leo non convallis. Donec non purus quam. Etiam
ut turpis libero. Morbi ex orci, consequat pulvinar urna ac, blandit ultrices mi</p>
</div>
Had this working fine but then it's recently broke. At 1500px the column system turns into a single 100% width column but for some reason the text goes off the screen at around 700px and I don't understand why. The text at the bottom works fine and the navbar works fine too but for somreason the text breaks.
URL: liammacalister.com
<!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="homeStyle.css">
<title>Liam Macalister - Home</title>
</head>
<div class="header">
<h1>Liam Macalister - Portfolio</h1>
</div>
<ul class="topnav">
<li>Home</li>
<li>About Me</li>
<li>Unity</li>
<li>Unreal</li>
<li>CV</li>
<li>Contact</li>
</ul>
<div class="row">
<div class="column">
<h2>Left Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac consequat velit.
Ut fringilla luctus tortor, in tempus sapien euismod vitae. Donec suscipit sagittis malesuada.
Ut non diam vitae tellus ultricies molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Pellentesque ac ante sollicitudin neque commodo euismod eu vel urna.
Nullam molestie nulla lorem, quis congue leo egestas sit amet.
Vivamus at aliquam justo. Suspendisse dictum, massa eu commodo cursus, lorem lacus fermentum arcu,
quis mattis est felis quis neque. Mauris vitae urna tempor, mattis elit et, lobortis dui.
Donec faucibus faucibus dolor, eu varius velit egestas vitae. Proin ac tincidunt nulla, vel imperdiet nibh.
Vivamus et tellus turpis. Quisque ac ultrices nisl, a ullamcorper velit. Duis scelerisque consequat lacus,
sit amet vulputate lorem rhoncus ac. Suspendisse luctus quam at tincidunt varius.
Sed quis est sed odio consequat gravida. Phasellus convallis erat sed turpis interdum, eu facilisis ipsum aliquet.
Sed semper purus nec purus elementum volutpat. Curabitur iaculis tristique hendrerit.
Aenean ullamcorper enim gravida odio maximus, et tincidunt leo varius. Donec porta sapien ac risus elementum eleifend.
Suspendisse potenti. In hac habitasse platea dictumst. Etiam mi est, suscipit vel nunc sit amet, laoreet molestie risus.
Praesent placerat dolor libero, imperdiet porta libero imperdiet ultricies. Nulla tincidunt nunc augue,
a dignissim purus porta in. Donec eget ligula dictum magna bibendum volutpat eu id diam. Praesent semper sem neque.
Vivamus in dolor libero.
Aliquam tempus viverra est, ac feugiat ligula sagittis a. In hac habitasse platea dictumst. Integer nec enim leo.
Fusce hendrerit erat enim. Nam vehicula augue non augue consequat, sit amet rhoncus est maximus. Quisque sit amet nunc nisi.
Vivamus consequat dictum lorem sit amet vehicula. Nam aliquet pellentesque lacus, non iaculis nisi pretium at.
Aliquam ornare facilisis rhoncus. Donec sit amet sem quis nulla vulputate hendrerit ultrices in nunc.
Quisque at molestie lectus. Aenean elementum vehicula nulla, id fermentum lorem mollis quis. Ut ac risus aliquet,
pulvinar nunc eu, convallis nulla. Vivamus molestie mattis mi, vitae pellentesque dolor accumsan non.
Vestibulum in tempor urna. Mauris eu dignissim quam, in congue turpis. Sed dolor ligula, pulvinar in tortor quis,
vehicula auctor mauris. In posuere nibh neque, quis tincidunt felis maximus ut.
In laoreet nunc quis sapien convallis dictum. Mauris ex neque, lobortis et metus vitae, sodales tristique lacus.
Cras eget blandit elit. Aenean vestibulum lectus at quam commodo posuere. Donec eu elit posuere, tempus turpis eget,
placerat sem. Nam augue nisl, ultricies quis felis et, dictum gravida odio.
</p>
</div>
<div class="column">
<img class="imgMe" src="Me.jpg" alt="Me">
</div>
<div class="column">
<h2>Right Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac consequat velit.
Ut fringilla luctus tortor, in tempus sapien euismod vitae. Donec suscipit sagittis malesuada.
Ut non diam vitae tellus ultricies molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Pellentesque ac ante sollicitudin neque commodo euismod eu vel urna.
Nullam molestie nulla lorem, quis congue leo egestas sit amet.
Vivamus at aliquam justo. Suspendisse dictum, massa eu commodo cursus, lorem lacus fermentum arcu,
quis mattis est felis quis neque. Mauris vitae urna tempor, mattis elit et, lobortis dui.
Donec faucibus faucibus dolor, eu varius velit egestas vitae. Proin ac tincidunt nulla, vel imperdiet nibh.
Vivamus et tellus turpis. Quisque ac ultrices nisl, a ullamcorper velit. Duis scelerisque consequat lacus,
sit amet vulputate lorem rhoncus ac. Suspendisse luctus quam at tincidunt varius.
Sed quis est sed odio consequat gravida. Phasellus convallis erat sed turpis interdum, eu facilisis ipsum aliquet.
Sed semper purus nec purus elementum volutpat. Curabitur iaculis tristique hendrerit.
Aenean ullamcorper enim gravida odio maximus, et tincidunt leo varius. Donec porta sapien ac risus elementum eleifend.
Suspendisse potenti. In hac habitasse platea dictumst. Etiam mi est, suscipit vel nunc sit amet, laoreet molestie risus.
Praesent placerat dolor libero, imperdiet porta libero imperdiet ultricies. Nulla tincidunt nunc augue,
a dignissim purus porta in. Donec eget ligula dictum magna bibendum volutpat eu id diam. Praesent semper sem neque.
Vivamus in dolor libero.
Aliquam tempus viverra est, ac feugiat ligula sagittis a. In hac habitasse platea dictumst. Integer nec enim leo.
Fusce hendrerit erat enim. Nam vehicula augue non augue consequat, sit amet rhoncus est maximus. Quisque sit amet nunc nisi.
Vivamus consequat dictum lorem sit amet vehicula. Nam aliquet pellentesque lacus, non iaculis nisi pretium at.
Aliquam ornare facilisis rhoncus. Donec sit amet sem quis nulla vulputate hendrerit ultrices in nunc.
Quisque at molestie lectus. Aenean elementum vehicula nulla, id fermentum lorem mollis quis. Ut ac risus aliquet,
pulvinar nunc eu, convallis nulla. Vivamus molestie mattis mi, vitae pellentesque dolor accumsan non.
Vestibulum in tempor urna. Mauris eu dignissim quam, in congue turpis. Sed dolor ligula, pulvinar in tortor quis,
vehicula auctor mauris. In posuere nibh neque, quis tincidunt felis maximus ut.
In laoreet nunc quis sapien convallis dictum. Mauris ex neque, lobortis et metus vitae, sodales tristique lacus.
Cras eget blandit elit. Aenean vestibulum lectus at quam commodo posuere. Donec eu elit posuere, tempus turpis eget,
placerat sem. Nam augue nisl, ultricies quis felis et, dictum gravida odio.
</p>
</div>
</div>
<div id ="aboutContent" class="aboutContent">
<h2> Second Text</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac consequat velit.
Ut fringilla luctus tortor, in tempus sapien euismod vitae. Donec suscipit sagittis malesuada.
Ut non diam vitae tellus ultricies molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Pellentesque ac ante sollicitudin neque commodo euismod eu vel urna.
Nullam molestie nulla lorem, quis congue leo egestas sit amet.
Vivamus at aliquam justo. Suspendisse dictum, massa eu commodo cursus, lorem lacus fermentum arcu,
quis mattis est felis quis neque. Mauris vitae urna tempor, mattis elit et, lobortis dui.
Donec faucibus faucibus dolor, eu varius velit egestas vitae. Proin ac tincidunt nulla, vel imperdiet nibh.
Vivamus et tellus turpis. Quisque ac ultrices nisl, a ullamcorper velit. Duis scelerisque consequat lacus,
sit amet vulputate lorem rhoncus ac. Suspendisse luctus quam at tincidunt varius.
Sed quis est sed odio consequat gravida. Phasellus convallis erat sed turpis interdum, eu facilisis ipsum aliquet.
Sed semper purus nec purus elementum volutpat. Curabitur iaculis tristique hendrerit.
Aenean ullamcorper enim gravida odio maximus, et tincidunt leo varius. Donec porta sapien ac risus elementum eleifend.
Suspendisse potenti. In hac habitasse platea dictumst. Etiam mi est, suscipit vel nunc sit amet, laoreet molestie risus.
Praesent placerat dolor libero, imperdiet porta libero imperdiet ultricies. Nulla tincidunt nunc augue,
a dignissim purus porta in. Donec eget ligula dictum magna bibendum volutpat eu id diam. Praesent semper sem neque.
Vivamus in dolor libero.
Aliquam tempus viverra est, ac feugiat ligula sagittis a. In hac habitasse platea dictumst. Integer nec enim leo.
Fusce hendrerit erat enim. Nam vehicula augue non augue consequat, sit amet rhoncus est maximus. Quisque sit amet nunc nisi.
Vivamus consequat dictum lorem sit amet vehicula. Nam aliquet pellentesque lacus, non iaculis nisi pretium at.
Aliquam ornare facilisis rhoncus. Donec sit amet sem quis nulla vulputate hendrerit ultrices in nunc.
Quisque at molestie lectus. Aenean elementum vehicula nulla, id fermentum lorem mollis quis. Ut ac risus aliquet,
pulvinar nunc eu, convallis nulla. Vivamus molestie mattis mi, vitae pellentesque dolor accumsan non.
Vestibulum in tempor urna. Mauris eu dignissim quam, in congue turpis. Sed dolor ligula, pulvinar in tortor quis,
vehicula auctor mauris. In posuere nibh neque, quis tincidunt felis maximus ut.
In laoreet nunc quis sapien convallis dictum. Mauris ex neque, lobortis et metus vitae, sodales tristique lacus.
Cras eget blandit elit. Aenean vestibulum lectus at quam commodo posuere. Donec eu elit posuere, tempus turpis eget,
placerat sem. Nam augue nisl, ultricies quis felis et, dictum gravida odio.</p>
</div>
<div id ="unityContent" class="unity">
</div>
<div id ="unrealContent" class="unreal">
</div>
<div id ="cvContent" class="cv">
</div>
<div id="footer" class="footer">
<h2>Contact</h2>
</div>
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
#font-face{
font-family: PermanentMarker;
src:URL('PermanentMarker.ttf') format('truetype');
}
html {
scroll-behavior: smooth;
}
body{
margin: 0;
}
.header {
font-family: PermanentMarker;
font-size: 28px;
padding: 20px;
text-align: center;
}
h2 {
font-family: PermanentMarker;
}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover {background-color: #111;}
ul.topnav li.right {float: right;}
.column {
float: left;
width: 33.33%;
padding: 15px;
/*font-size: 18px;*/
}
p{
font-family: Arial, Helvetica, sans-serif;
}
.row {
content:"";
display: table;
clear: both;
}
.imgMe{
padding-top: 30px;
display: block;
margin-right: auto;
margin-left: auto;
}
.aboutContent{
padding: 15px;
}
.footer {
background-color: black;
color: white;
text-align: center;
padding: 10px;
}
#media screen and (max-width: 2000px){
.column{
width: 50%;
}
}
#media screen and (max-width: 1500px){
.column{
width: 100%;
}
}
#media screen and (max-width: 600px){
ul.topnav li.right,
ul.topnav li {float: none;
}
.column{
width: 100%;
}
}
Any advice?
Instead of using floats and display: table I would use flex.
2 examples as intended result is not clear.
HTML:(2 rows of 2columns with 2nd row column gone right)
<div class="container">
<div class="row">
<div class="col">
<p>Text LEFT</p>
</div>
<div class="col">
<img src="liamphoto.jpg" alt="">
</div>
</div>
<div class="row-reverse">
<div class="col">
<p>Text RIGHT</p>
</div>
</div>
</div>
CSS:
.container {
padding: 0 15px;
margin: 0 auto;
max-width: 1400;
}
.row {
display: flex;
height: 100%;
}
.row-reverse {
display: flex;
flex-direction: row-reverse;
}
.col {
height: 100%;
width: 50%;
border: solid green;
}
img {
width: 100%;
height: auto;
}
#media screen and (max-width: 600px) {
.row {
display: block;
}
.col {
width: 100%;
}
}
HTML: (1 row of 3columns of equal width)
<div class="container">
<div class="row">
<div class="col">
<p>Text LEFT</p>
</div>
<div class="col">
<img src="Me.jpg" alt="">
</div>
<div class="col">
<p>Text RIGHT</p>
</div>
</div>
</div>
CSS:
add at top
* {
margin: 0;
padding: 0;
}
change:
.col {
height: 100%;
width: 33%;
}
Adapt .col widths and media queries to your needs.
The following code results in the scrollbar not being clickable and/or draggable, and this happens arbitrarily in Chrome only.
Is there anything obvious in the code that's causing this?
- If so, how should be fixed?
- If not, how do I continue to troubleshoot it?
I tried working the Chrome debugger but clicking on the sidebar does not reveal anything useful.
html {
max-width: 780px;
margin: 0 auto;
}
body {
background-image:url('https://img.freepik.com/free-vector/retro-styled-pattern-background_1048-6593.jpg');
background-size: 116px;
background-repeat:repeat-x;
}
header {
display:flex;
flex-wrap: wrap;
justify-content:space-between;
align-items:center;
margin-bottom:23px;
}
#logo {
margin-left:15px;
}
#forum-link {
max-width:110px;
margin-right:35px;
}
#forum-link a{
color:white;
text-decoration:none;
font-weight:bold;
font-size:x-large;
}
footer
{
text-align:center;
font-size:small;
}
#media only screen and (orientation: portrait) {
html{
margin: 0;
height: 100%;
}
body{
margin: 0;
height: 100%;
display: flex;
flex-flow: column;
}
header{
display: block;
width: 100%;
position: relative;
height: auto;
margin-bottom: 50px;
}
#logo {
margin:initial;
display:flex;
align-items: center;
justify-content:center;
}
#forum-link {
margin: initial;
max-width:initial;
background:#323232;
height: 27px;
position: absolute;
bottom: -50px;
width: 100%;
display:flex;
align-items: center;
justify-content:center;
}
#forum-link a{
font-weight:bold;
font-size:.9em;
}
#forum-link a:hover{
text-decoration:underline;
}
#content{
flex: 1;
margin: 0px 20px 0px 20px;
}
<body>
<header>
<div id="logo"><img src="http://placekitten.com/g/354/85" srcset="http://placekitten.com/g/354/85 1x, http://placekitten.com/g/354/85 2x" width="354" height="85"></div>
<div id="forum-link">Join our Forums!</div>
</header>
<div id="content">
<h1>Lorem Ipsum</h1>
<h2>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</h2>
<h3>"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae aliquam mi. Nam in dictum nulla. Donec sit amet mollis nunc. Aliquam a elit quis felis finibus accumsan. Vivamus vel pellentesque mauris. Integer et commodo lectus. Donec fermentum urna ac lorem euismod fermentum. Aliquam porttitor, lacus id consectetur auctor, velit est mollis risus, iaculis aliquet massa massa in velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et semper orci, sed rhoncus purus. Cras rhoncus accumsan libero nec sagittis. Proin ac ipsum suscipit tortor tincidunt malesuada et at sapien. Morbi mollis ultricies lacus ut blandit.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque sagittis mi. Proin commodo tempor sem at euismod. Nam vel porta mauris. Nunc rutrum libero vitae dui tincidunt, eget condimentum mi semper. Cras gravida nunc vel pulvinar tempor. Nunc rhoncus rutrum justo, vel facilisis ex fringilla in. Sed posuere ex non eros ultrices varius.
<p>
Fusce vestibulum quis arcu ac dapibus. Maecenas felis ante, auctor sed congue ut, convallis a arcu. Nunc vel maximus quam. Nam mauris purus, commodo et leo vel, volutpat sollicitudin libero. Mauris porta lectus nibh, et suscipit ipsum condimentum elementum. Sed sem lectus, aliquet id condimentum id, maximus eget felis. Sed ornare augue libero, eget hendrerit sem porttitor vitae. Ut porttitor vehicula dapibus. Suspendisse at accumsan orci.
<p>
In ante eros, condimentum id elit quis, sagittis bibendum arcu. Phasellus in metus quam. Sed gravida condimentum mi sit amet molestie. Ut blandit tempus libero ut porta. Sed blandit sem eget mi rutrum, at lacinia risus efficitur. Duis rhoncus porta lacus, scelerisque scelerisque tellus sodales quis. Nunc maximus ex et placerat commodo. Curabitur quis bibendum tortor. Sed condimentum vel urna laoreet mollis. Quisque molestie orci sed sodales porttitor.
<p>
Morbi ipsum erat, varius eu eros id, porta vestibulum nulla. In mattis dolor nisi, ut luctus dolor cursus a. Phasellus tempor diam enim, a accumsan justo dignissim sit amet. Vestibulum congue, arcu non accumsan rutrum, tortor augue sodales lacus, eu fermentum leo odio eu nibh. Cras non urna non leo imperdiet varius. Vestibulum eget magna metus. Curabitur eu tempor magna.
</div>
<footer>
<div id="copyright">© Copyright text</div>
</footer>
</body>
</html>
This might be a silly but still worth asking.
Suppose I have the following:
HTML
div {
width: 200px;
height: 100px;
margin-left: auto;
margin-right: auto;
}
#red {
background: red;
}
#media only screen and (min-width: 630px) {
.left {
clear: left;
float: left;
margin-right: 10px;
}
}
<h1>Heading</h1>
<!-- rectangle -->
<div id="red" class="left"></div>
<!-- paragraph 1 -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque consequat auctor enim, finibus porttitor neque condimentum non. Maecenas finibus, ex sed vehicula vehicula, libero dolor maximus elit, eu posuere ex odio in mi. Cras ipsum dolor, lacinia
nec tempus nec, luctus ut diam. Etiam pretium dolor a eros dignissim, vel tempus est condimentum. Phasellus fringilla condimentum arcu eget laoreet. Donec eget enim eget nunc volutpat rhoncus et vel tortor. Morbi tincidunt fermentum sapien sit amet
euismod.
</p>
<!-- paragraph 2 -->
<p>In hac habitasse platea dictumst. Praesent fringilla nulla id risus vehicula, vitae fermentum nisl varius. Nullam bibendum arcu risus, quis volutpat augue fermentum sit amet. Mauris vehicula lacus sed est tempor interdum. Fusce non fermentum metus, eget
posuere lorem. Nulla facilisi. Ut laoreet justo sed neque aliquet, a ultrices nisi consequat. Suspendisse nec sem et metus fermentum venenatis vel a ligula. In hac habitasse platea dictumst. Aenean interdum mi at lorem gravida, ac lobortis mauris mollis.
Nulla eu metus erat. Phasellus et dui ex. Pellentesque nec lectus accumsan, ultrices nunc vitae, dictum sapien. Proin quis tortor tellus. Maecenas in sem eu enim mattis pellentesque.</p>
(1) On a big screen (e.g. >629px), it will float the rectangle to the LEFT of paragraph 1.
(2) On a small screen, it will obviously center and position the rectangle ABOVE paragraph 1.
My problem is with (2). Without using JavaScript, is it possible to move the rectangle BELOW paragraph 1 but still ensure (1) ?
--
If you look at this demo, resize the output window, the first rectangle appears in between the heading and paragraph on a small window.
My goal is to have all paragraphs either appear AFTER a paragraph on a small screen or LEFT/RIGHT on a big screen.
The only way so far that I can think of doing this is to have 2 copies of the rectangle (one before the paragraph, one after the paragraph) and use media queries to toggle between them. So I am just seeing if there is any other way.
Can use a flexbox around the elements and flip them that way.
.rectangle {
width: 200px;
height: 100px;
margin-left: auto;
margin-right: auto;
}
#red {
background: red;
}
.container {
display: flex;
flex-direction: column-reverse;
}
#media only screen and (min-width: 630px) {
.left {
clear: left;
float: left;
margin-right: 10px;
}
.container {
display: block;
}
}
<h1>Heading</h1>
<div class="container">
<!-- rectangle -->
<div id="red" class="left rectangle"></div>
<!-- paragraph 1 -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque consequat auctor enim, finibus porttitor neque condimentum non. Maecenas finibus, ex sed vehicula vehicula, libero dolor maximus elit, eu posuere ex odio in mi. Cras ipsum dolor, lacinia
nec tempus nec, luctus ut diam. Etiam pretium dolor a eros dignissim, vel tempus est condimentum. Phasellus fringilla condimentum arcu eget laoreet. Donec eget enim eget nunc volutpat rhoncus et vel tortor. Morbi tincidunt fermentum sapien sit amet
euismod.
</p>
</div>
<!-- paragraph 2 -->
<p>In hac habitasse platea dictumst. Praesent fringilla nulla id risus vehicula, vitae fermentum nisl varius. Nullam bibendum arcu risus, quis volutpat augue fermentum sit amet. Mauris vehicula lacus sed est tempor interdum. Fusce non fermentum metus, eget
posuere lorem. Nulla facilisi. Ut laoreet justo sed neque aliquet, a ultrices nisi consequat. Suspendisse nec sem et metus fermentum venenatis vel a ligula. In hac habitasse platea dictumst. Aenean interdum mi at lorem gravida, ac lobortis mauris mollis.
Nulla eu metus erat. Phasellus et dui ex. Pellentesque nec lectus accumsan, ultrices nunc vitae, dictum sapien. Proin quis tortor tellus. Maecenas in sem eu enim mattis pellentesque.</p>
You can't really physically move the element below the paragraph just with CSS, but you can duplicate it and play with show/hide :
.red {
width: 200px;
height: 100px;
margin-left: auto;
margin-right: auto;
background: red;
}
.left{
display: none;
}
#media only screen and (min-width: 630px) {
.left {
clear: left;
float: left;
margin-right: 10px;
display: block;
}
.below{
display: none;
}
}
<h1>Heading</h1>
<!-- rectangle -->
<div class="red left"></div>
<!-- paragraph 1 -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque consequat auctor enim, finibus porttitor neque condimentum non. Maecenas finibus, ex sed vehicula vehicula, libero dolor maximus elit, eu posuere ex odio in mi. Cras ipsum dolor, lacinia
nec tempus nec, luctus ut diam. Etiam pretium dolor a eros dignissim, vel tempus est condimentum. Phasellus fringilla condimentum arcu eget laoreet. Donec eget enim eget nunc volutpat rhoncus et vel tortor. Morbi tincidunt fermentum sapien sit amet
euismod.
</p>
<!-- rectangle -->
<div class="red below"></div>
<!-- paragraph 2 -->
<p>In hac habitasse platea dictumst. Praesent fringilla nulla id risus vehicula, vitae fermentum nisl varius. Nullam bibendum arcu risus, quis volutpat augue fermentum sit amet. Mauris vehicula lacus sed est tempor interdum. Fusce non fermentum metus, eget
posuere lorem. Nulla facilisi. Ut laoreet justo sed neque aliquet, a ultrices nisi consequat. Suspendisse nec sem et metus fermentum venenatis vel a ligula. In hac habitasse platea dictumst. Aenean interdum mi at lorem gravida, ac lobortis mauris mollis.
Nulla eu metus erat. Phasellus et dui ex. Pellentesque nec lectus accumsan, ultrices nunc vitae, dictum sapien. Proin quis tortor tellus. Maecenas in sem eu enim mattis pellentesque.</p>
You can use a wrapper around each paragraph and rectangle pair and apply display: flex and flex-direction: column-reverse to that wrapper on small screens:
.wrapper {
width: auto;
height: auto;
display: flex;
flex-direction: column-reverse;
}
On large screens you simply reset it to display: block
https://codepen.io/anon/pen/wpVyQx
I'd like to create a list that looks good on every devices.
The image shows what I want to achieve.
My first problem is that the description is under the image.
The second one is that the image isn't centered on mobile device.
Thanks for helping me in advance.
Here is my code:
.title {
margin: 0;
}
.tabpage-list {
padding: 0;
width: 100%;
}
.tabpage-list {
display: inline;
}
.tabpage-list-item {
margin-top: 1em;
padding: 1em;
background-color: #f5f5f5;
}
.tli-image-container {
height: 100%;
margin-right: 1%;
float: left;
}
#media screen and (max-width : 480px) {
.tli-image-container {
float: none;
text-align: center;
}
}
And the HTML
<div>
<ul class="tabpage-list">
<li>
<div class="tabpage-list-item">
<div class="tli-image-container">
<img src="http://im10.trueachievements.com/imagestore/0001319900/1319949.jpg" />
</div>
<div>
<p class="title">some title</p>
<a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer velit augue, porttitor in neque vitae, sodales commodo ligula. Pellentesque massa urna, sagittis nec ullamcorper vitae, pharetra a elit. Nullam eu lectus vel justo interdum elementum non faucibus lacus. Vivamus placerat, augue vel egestas rutrum, eros nisi mattis arcu, quis cursus mi leo quis est. Sed nulla quam, mollis vel elit ac, varius gravida felis. Donec elementum felis at lacus eleifend, a placerat eros auctor. Proin laoreet ornare nisl, blandit lobortis ipsum porttitor ac. Ut elit dolor, egestas vitae est nec, tristique adipiscing lorem. Pellentesque lacinia justo et nisl fermentum molestie quis et est. Proin at volutpat dui, vel sollicitudin turpis. Sed eu placerat lectus. Aenean dictum lacinia eros, vitae consequat nisl. Ut vitae nisi ut nulla mattis ultrices non quis felis. Proin vestibulum sit amet nunc sit amet volutpat.</a>
</div>
</div>
</li>
<li>
<div class="tabpage-list-item">
<div class="tli-image-container">
<img src="http://im10.trueachievements.com/imagestore/0001319900/1319949.jpg" />
</div>
<div>
<p class="title">some title</p>
<a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer velit augue, porttitor in neque vitae, sodales commodo ligula. Pellentesque massa urna, sagittis nec ullamcorper vitae, pharetra a elit. Nullam eu lectus vel justo interdum elementum non faucibus lacus. Vivamus placerat, augue vel egestas rutrum, eros nisi mattis arcu, quis cursus mi leo quis est. Sed nulla quam, mollis vel elit ac, varius gravida felis. Donec elementum felis at lacus eleifend, a placerat eros auctor. Proin laoreet ornare nisl, blandit lobortis ipsum porttitor ac. Ut elit dolor, egestas vitae est nec, tristique adipiscing lorem. Pellentesque lacinia justo et nisl fermentum molestie quis et est. Proin at volutpat dui, vel sollicitudin turpis. Sed eu placerat lectus. Aenean dictum lacinia eros, vitae consequat nisl. Ut vitae nisi ut nulla mattis ultrices non quis felis. Proin vestibulum sit amet nunc sit amet volutpat.</a>
</div>
</div>
<li>
</ul>
</div>
I think you were looking for: width:calc(100% - px); to keep the ratio of the image. Also, it was quicker to rewrite the code based your wireframes. http://jsfiddle.net/NinoLopezWeb/twq87mj9/