I have three flexbox containers (header, .content__description and footer) and two of them (header and .content__description) don't fit the children's height in Chrome, but only in Firefox. Therefore, the first container is covered by the second one. Why does it occur?
/* util.css */
.break {
width: 100%;
}
/* An issue
html,
body {
height: 100%;
}
*/
/* The solution I found */
html {
height: 100%;
}
body {
min-height: 100%;
}
/* Other styles */
body {
display: flex;
flex-direction: column;
justify-content: space-between;
color: rgb(255, 255, 255);
background-color: rgb(20, 142, 210);
}
header {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
margin-top: 3em;
margin-bottom: 3em;
}
.header__logo {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding-bottom: 1em;
}
.header__logo img {
width: 3em;
height: 3.3em;
margin-right: 0.6em;
}
.header__logo span {
font-size: 5em;
font-weight: 400;
}
.header__slogan {
font-size: 1.5em;
font-weight: 400;
text-align: center;
}
.content {
margin-left: auto;
margin-right: auto;
}
.content__description {
display: flex;
flex-direction: column;
padding-top: 3em;
padding-bottom: 3em;
background-color: rgb(0, 114, 174);
position: relative;
}
.content__description__signin {
position: absolute;
text-decoration: none;
text-align: center;
color: black;
background-color: rgb(254, 190, 0);
box-sizing: border-box;
font-size: 2em;
border: 0.2em rgb(255, 255, 255) solid;
line-height: 1em;
width: 6em;
padding: 0.2em;
top: calc(100% - 0.9em);
left: calc(50% - 3em);
}
.content__description__signin:hover {
background-color: rgb(241, 177, 0);
}
.content__description__strep {
width: 13em;
text-align: center;
font-size: 2em;
box-sizing: border-box;
}
.content__description__strep img {
width: 5em;
height: 5em;
border: 0.2em rgb(255, 255, 255) solid;
border-radius: 50%;
box-shadow: 0.2em 0.5em 1em rgba(0, 0, 0, 0.3);
box-sizing: border-box;
margin-bottom: 1em;
}
.content__description__strep figcaption {
background-color: rgb(2, 98, 148);
padding: 1em;
margin-left: -1em;
margin-right: -1em;
}
footer {
flex-grow: 1;
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
min-height: 1.8em;
}
<body>
<header>
<div class="header__logo">
<img src="images/logo.svg" alt="logo">
<span>Sailing</span>
</div>
<span class="break"></span>
<h1 class="header__slogan">You can!</h1>
</header>
<div class="content">
<div class="content__description">
<figure class="content__description__strep">
<img src="images/meeting.jpg" alt="meeting">
<figcaption>Talking</figcaption>
</figure>
<figure class="content__description__strep">
<img src="images/sailing.jpg" alt="sailing">
<figcaption>Sailing</figcaption>
</figure>
<figure class="content__description__strep">
<img src="images/cinema.jpg" alt="cinema">
<figcaption>Watching</figcaption>
</figure>
Sign in
</div>
</div>
<footer> </footer>
</body>
EDIT #1
The display style of .content__description is changed to "flex" (misprint).
EDIT #2
I've found the solution - switched body {height: 100%} to body {min-height: 100%}. It works perfectly for me.
Related
I have a popup window (within the same page) which I'm attempting to put a container which scrolls horizontally into, yet it distorts the popup window and does not display anything other than the scrollbar. I'm honestly at a loss, can anyone help me here? I've looked around for solutions but I can't find anything that I can see applies to my problem.
If anyone can help, or point me in the right direction, I'd be really grateful. The scrollbar works perfectly fine when isolated, but inside the window shows like this:
Standalone:
My HTML (popup window with scrollbar inside)
<div id="formula-popup" class="popup-window">
<div>
<a onclick="closeFormulaWindow()" title="Close" class="close">X</a>
<span id="ftitle" class="title1"></span>
<form method="post" id="formulaform" name="edit">
<span>Current Formula</span>
<p id="current-formula" class="formula">Existing formula</p>
<input id="id-passer" type="hidden" name="formula-id" value="">
<!--sort out horizontal scrollbar from bookmarks here later-->
<input onclick="refreshWindow()" name="edit-formula" type="submit" value="Confirm">
</form>
<div class="h-scrollbar">
<section class="h-scrollbar-container">
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="pseudo-item"></div>
<div class="pseudo-item"></div>
<div class="pseudo-item"></div>
<div class="pseudo-item"></div>
<div class="pseudo-item"></div>
<div class="pseudo-item"></div>
</div>
</div>
<div class="pseudo-track"></div>
</section>
</div>
</div>
My CSS:
.scrollbar-container {
display: flex;
flex-direction: row;
}
.h-scrollbar {
display: flex;
max-width: 30vw;
padding: 0px 10px;
height: 20vh;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
}
.h-scrollbar-container {
width: 100%;
}
.outer-wrapper {
max-width: 100vw;
overflow-x: scroll;
position: relative;
scrollbar-color: #d5ac68 #f1db9d;
scrollbar-width: thin;
-ms-overflow-style: none;
}
.pseudo-track {
background-color: #f1db9d;
height: 2px;
width: 100%;
position: relative;
top: -3px;
z-index: -10;
}
.outer-wrapper::-webkit-scrollbar {
height: 5px;
}
.outer-wrapper::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 0px rgba(0, 0, 0, 0);
}
.outer-wrapper::-webkit-scrollbar-thumb {
height: 5px;
background-color: #d5ac68;
}
.outer-wrapper::-webkit-scrollbar-thumb:hover {
background-color: #f1db9d;
}
.outer-wrapper::-webkit-scrollbar:vertical {
display: none;
}
.inner-wrapper {
display: flex;
padding-bottom: 10px;
}
.pseudo-item {
height: 30px;
width: 80px;
margin-right: 15px;
flex-shrink: 0;
background-color: gray;
}
.pseudo-item:nth-of-type(2n) {
background-color: lightgray;
}
.popup-window {
position: fixed;
font-family: Arial, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: none;
}
.popup-window div {
width: 40vw;
height: 30vw;
position: relative;
margin: 10% auto 30%;
border-radius: 10px;
background: #213B54;
padding-top: 2vh;
padding-left: 1vw;
padding-right: 1vw;
padding-bottom: 2vh;
display: flex;
flex-direction: column;
}
.close {
font: Arial, sans-serif;
background: #067A9F;
color: #B5E5E7;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
border-radius: 12px;
box-shadow: 1px 1px 3px #000;
cursor: pointer;
}
.popup-window div .title1 {
font-family: Arial, sans-serif;
font-weight: normal;
font-size: 36px;
color: #EE6802;
align-self: center;
}
.popup-window form input[type=submit]:hover {
opacity: 0.8;
}
.popup-window form span {
color: #EE6802;
font-size: 22px;
}
.popup-window form {
display: flex;
flex-direction: column;
font-family: Arial, sans-serif;
}
.popup-window form span, input {
width: 100%;
}
.popup-window form input[type=submit] {
width: 20%;
background-color: #067A9F;
color: #213B54;
padding: 14px 0;
cursor: pointer;
border: none;
}
I found the solution, it was that I forgot to select an element inside the window properly and instead it was selecting all divs and so overriding the CSS properties.
You will see below that I attempted to create a divclass for a button - however, for some reason, only that divclass doesn't get any styling.
Please help me out to figure out why ctabutton class doesn't get styling. There were supposed to be borders around. I'm probably missing something very easy to notice - please give me wisdom.
Here is a link to codepen: https://codepen.io/CanYildiz/pen/ExEYmZb
:root {
--black: rgba(0, 0, 0, 1);
--alllports: rgba(8, 116, 183, 1);
--white: rgba(255, 255, 255, 1);
--font-size-xs: 10px;
--font-size-s: 14px;
--font-size-m: 15px;
--font-size-l: 28px;
--font-family-inter: Sans-Serif;
--font-family-lato: "Lato";
}
#import url("https://fonts.googleapis.com/css?family=Inter:400,700|Lato:500");
.container {
align-items: flex-start;
background-color: var(--white);
display: flex;
flex-direction: column;
min-height: 469px;
width: 666px;
border: 1px solid var(--black);
}
.hidden,
.hidden * {
pointer-events: none;
visibility: hidden;
}
.pflichttext {
color: #094e7c;
cursor: pointer;
font-family: var(--font-family-inter);
font-size: var(--font-size-xs);
font-weight: 400;
letter-spacing: 0;
margin-top: 8px;
min-height: 15px;
text-decoration: underline;
width: 666px;
}
.container-1 {
align-items: flex-start;
cursor: pointer;
display: flex;
flex-direction: column;
min-height: 45px;
width: 666px;
}
.ctabutton {
display: inline-block;
align-items: flex-start;
text-decoration: none;
border: 5px solid var(--allports);
border-radius: 4px;
display: flex;
height: 44px;
margin-left: 3px;
margin-top: 8px;
min-width: 106px;
padding: 14px 16px;
}
.cta-text {
color: var(--allports);
font-family: var(--font-family-lato);
font-size: var(--font-size-s);
font-weight: 500;
height: 14px;
letter-spacing: 0;
line-height: 14px;
min-width: 72px;
text-align: center;
white-space: nowrap;
}
.valign-text-middle {
display: flex;
flex-direction: column;
justify-content: center;
}
.image-1 {
height: 312px;
object-fit: cover;
width: 666px;
}
.frame-1 {
align-items: flex-start;
display: flex;
flex-direction: column;
margin-top: 9px;
min-height: 73px;
width: 664px;
}
.description {
color: #595858;
font-family: var(--font-family-inter);
font-size: var(--font-size-m);
font-weight: 400;
letter-spacing: 0;
margin-top: 3px;
min-height: 36px;
width: 664px;
}
.title {
color: var(--black);
font-family: Sans-Serif;
font-size: var(--font-size-l);
font-weight: 700;
letter-spacing: 0;
margin-top: -1px;
min-height: 34px;
width: 664px;
}
<div class="container screen">
<div class="container-1">
<img class="image-1" src="https://cdn.animaapp.com/projects/62b868b9500e6d0650eef4d7/releases/62b868bf500e6d0650eef4d8/img/image-1#1x.png" />
<div class=" frame-1">
<h1 class="title">TITLE</h1>
<p class="description">
Description about the product/service advertise!It is relatively longer than the Title itself.But just long enough to contain extra information
</p>
</div>
<div class="ctabutton">
<a href="clickurl.de" target="_blank">
<div class="cta-text valign-text-middle">CTATEXT</div>
</a>
</div>
<a href="https://demo.de" target="_blank">
<div class="pflichttext">Pflichttext</div>
</a>
</div>
The border style is not being applied because you have the root css variable named --alllports when an extra 'l' and you are trying to reference it by --allports on the class.
you're original code
:root {
--black: rgba(0, 0, 0, 1);
--alllports: rgba(8, 116, 183, 1);
--white: rgba(255, 255, 255, 1);
--font-size-xs: 10px;
--font-size-s: 14px;
--font-size-m: 15px;
--font-size-l: 28px;
--font-family-inter: Sans-Serif;
--font-family-lato: "Lato";
}
when it should be
:root {
--black: rgba(0, 0, 0, 1);
--allports: rgba(8, 116, 183, 1);
--white: rgba(255, 255, 255, 1);
--font-size-xs: 10px;
--font-size-s: 14px;
--font-size-m: 15px;
--font-size-l: 28px;
--font-family-inter: Sans-Serif;
--font-family-lato: "Lato";
}
I have tried using flexbox to center a couple buttons and a p but I'm having some troubles.
I have this code
.container {
background: rgb(255, 126, 50, 0.15);
padding: 0 2rem;
border-radius: 0.375rem;
margin: 3.625rem 1.25rem 2rem 1.25rem;
background: black;
}
.layout {
height: calc(100vh - 4.5rem);
background: balck;
}
.loginSection {
width: 50vh;
margin: 0 auto;
border: 1px solid #ffffff;
}
.loginSection p {
display: flex;
align-items: center;
margin: 16px 0;
text-align: center;
width: 12rem;
border: 1px solid #ffffff;
}
.btn-login {
height: 1.25rem;
display: flex;
color: rgba(255, 255, 255, 0.54);
text-decoration: none;
align-items: center;
width: 12rem;
margin: 0 auto;
border: 1px solid #ffffff;
padding: 1rem 1.25rem;
line-height: 1rem;
border-radius: 0.375rem;
font-size: 1rem;
}
.btn-login img {
margin-right: 1rem;
}
.btn-continue {
height: 1.25rem;
display: flex;
color: rgba(255, 255, 255, 0.54);
text-decoration: none;
align-items: center;
width: 12rem;
margin: 0 auto;
border: 1px solid #ffffff;
padding: 1rem 1.25rem;
line-height: 1rem;
border-radius: 0.375rem;
font-size: 1rem;
}
<div class="layout">
<div class="container">
<div class="loginSection">
<button class="btn-login" href="/login">
Log-In
</button>
<p>Enter your email</p>
<button class="btn-continue" href="/home">Continue</button>
</div>
</div>
</div>
But I can center the p
| | Log-In | |
|Enter your email |
| | Continue | |
.container {
background: rgb(255, 126, 50, 0.15);
padding: 0 2rem;
border-radius: 0.375rem;
margin: 3.625rem 1.25rem 2rem 1.25rem;
background: black;
}
.layout {
height: calc(100vh - 4.5rem);
background: balck;
}
.loginSection {
width: 50vh;
margin: 0 auto;
border: 1px solid #ffffff;
}
.layout p {
text-align: center;
width: 12rem;
border: 1px solid #ffffff;
color: white;
margin: auto;
}
.btn-login {
height: 1.25rem;
display: flex;
color: rgba(255, 255, 255, 0.54);
text-decoration: none;
align-items: center;
width: 12rem;
margin: 0 auto;
border: 1px solid #ffffff;
padding: 1rem 1.25rem;
line-height: 1rem;
border-radius: 0.375rem;
font-size: 1rem;
}
.btn-login img {
margin-right: 1rem;
}
.btn-continue {
height: 1.25rem;
display: flex;
color: rgba(255, 255, 255, 0.54);
text-decoration: none;
align-items: center;
width: 12rem;
margin: 0 auto;
border: 1px solid #ffffff;
padding: 1rem 1.25rem;
line-height: 1rem;
border-radius: 0.375rem;
font-size: 1rem;
}
<div class="layout">
<div class="container">
<div class="loginSection">
<button class="btn-login" href="/login">
Log-In
</button>
<p>Enter your email</p>
<button class="btn-continue" href="/home">Continue</button>
</div>
</div>
</div>
Flexbox is typically used by setting flex properties on the parent container to affect the layout of the children inside of that container.
It looks like you're adding display: flex and align-items: center on the .loginSection p element, when flex properties should be set on the parent .loginSection.
If your intention is to center all the elements inside of the .loginSection horizontally, then you can get rid of the flex properties on the children, and add the following rules:
.loginSection {
display: flex;
flex-direction: column;
justify-content: center;
// ... other styles here
}
You'll want to add display:flex with flex-direction: column and align-items:center to the .loginSection container.
Typically when using flex, you flex the container and then the children become "flex-items" rather than flexing the items themselves.
.loginSection {
margin: 0 auto;
display: flex;
flex-direction: column;
align-items:center;
}
.loginSection p { text-align:center; }
<div class="layout">
<div class="container">
<div class="loginSection">
<button class="btn-login" href="/login">
Log-In
</button>
<p>Enter your email</p>
<button class="btn-continue" href="/home">Continue</button>
</div>
</div>
</div>
Or if you want them to all be stretched out use align-items:stretch
.loginSection {
margin: 0 auto;
padding: 1rem; /* optional if you don't want it to stretch the whole width */
display: flex;
flex-direction: column;
align-items:stretch;
}
.loginSection p { text-align:center; }
<div class="layout">
<div class="container">
<div class="loginSection">
<button class="btn-login" href="/login">
Log-In
</button>
<p>Enter your email</p>
<button class="btn-continue" href="/home">Continue</button>
</div>
</div>
</div>
My #main element ignores it's wrapper padding. I set position:absolute on children, but when I try to change it from position:static,to position:relative it just ignores parent's height. Any workarounds?
body, html {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper-body {
height: 100%;
display: flex;
flex-direction: column;
}
#wrapper-header {
width: 100%;
flex: 0 1 50px;
background: url("header.png");
display: flex;
align-items: center;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
z-index: 5;
}
#wrapper-main {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
padding: 25px;
}
#wrapper-footer {
width: 100%;
flex: 0 1 auto;
background-color: #212121;
}
#menu {
display: flex;
flex-direction: row;
list-style-type: none;
right: 0;
position: absolute;
}
.menu-button {
background-color: #3B3B3B;
width: 100px;
height: 22px;
margin-right: 15px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
color: #F7F7F7;
border-radius: 2px;
font-family: "codropsicons", verdana;
font-weight: 700;
text-transform: uppercase;
font-size: 14px;
transition: 0.5s;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
text-shadow: 2px 1px 2px rgba(0, 0, 0, 0.3);
}
.active-button, .menu-button:hover {
background-color: #E0962D;
}
#main {
background-color: green;
height: 100%;
width: 100%;
position: absolute;
}
#copyright {
height: 20px;
width: auto;
display: flex;
align-items: center;
font-family: "codropsicons", verdana;
font-weight: 700;
text-transform: uppercase;
font-size: 10px;
color: #F7F7F7;
margin-left: 15px;
opacity: 0.1;
}
<div id="wrapper-body">
<div id="wrapper-header">
<nav id="menu">
<a class="menu-button active-button">O nas</a>
<a class="menu-button">Oferta</a>
<a class="menu-button">Galeria</a>
<a class="menu-button">Kontakt</a>
</nav>
</div>
<div id="wrapper-main">
<main id="main">
Test
<br> Test
<br>
</main>
</div>
<div id="wrapper-footer">
<div id="copyright">Koyot © 2017 All rights reserved</div>
</div>
</div>
https://jsfiddle.net/Ldmmxw9m/3/
It doesn't ignore the parents height when using position: relative, it simply keeps the padding of the parent, but apart from that it fills the parent - see my snippet. Of course the parent's height has to be set when you use a percentage value for the child's height...
#wrapper-main{
flex:1 1 auto;
display:flex;
align-items:center;
justify-content:center;
position:relative;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
padding:25px;
background-color:yellow;
height: 200px;
}
#main{
background-color:green;
height:100%;
width:100%;
position:relative;
}
<div id="wrapper-main">
<main id="main">
some content
</main>
</div>
As Santi said, you can remove position: absolute on #main, since that will place the element relative to it's nearest positioned ancestor, ignoring the ancestor's padding.
Or if that's not an option, you could use top/left/right/bottom values that match the padding amount, and remove the padding on the parent if that's no longer needed.
/* TAGS */
body,
html {
height: 100%;
margin: 0;
padding: 0;
}
/* END OF TAGS */
/* WRAPPERS */
#wrapper-body {
height: 100%;
display: flex;
flex-direction: column;
}
#wrapper-header {
width: 100%;
flex: 0 1 50px;
background: url("header.png");
display: flex;
align-items: center;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
z-index: 5;
}
#wrapper-main {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
#wrapper-footer {
width: 100%;
flex: 0 1 auto;
background-color: #212121;
}
/* END OF WRAPPERS */
/* CONTENT */
#menu {
display: flex;
flex-direction: row;
list-style-type: none;
right: 0;
position: absolute;
}
.menu-button {
background-color: #3B3B3B;
width: 100px;
height: 22px;
margin-right: 15px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
color: #F7F7F7;
border-radius: 2px;
font-family: "codropsicons", verdana;
font-weight: 700;
text-transform: uppercase;
font-size: 14px;
transition: 0.5s;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
text-shadow: 2px 1px 2px rgba(0, 0, 0, 0.3);
}
.active-button,
.menu-button:hover {
background-color: #E0962D;
}
#main {
background-color: green;
top: 25px;
left: 25px;
right: 25px;
bottom: 25px;
position: absolute;
}
#copyright {
height: 20px;
width: auto;
display: flex;
align-items: center;
font-family: "codropsicons", verdana;
font-weight: 700;
text-transform: uppercase;
font-size: 10px;
color: #F7F7F7;
margin-left: 15px;
opacity: 0.1;
}
<body>
<div id="wrapper-body">
<div id="wrapper-header">
<nav id="menu">
<a class="menu-button active-button">O nas</a>
<a class="menu-button">Oferta</a>
<a class="menu-button">Galeria</a>
<a class="menu-button">Kontakt</a>
</nav>
</div>
<div id="wrapper-main">
<main id="main">
Test
<br> Test
<br>
</main>
</div>
<div id="wrapper-footer">
<div id="copyright">Koyot © 2017 All rights reserved</div>
</div>
</div>
</body>
1. Remove position: absolute; from #main.
Absolutely positioned items are "out of the flow". Setting the parent to relative will modify the absolute child element's bounding box to it's own height and width, but padding is not taken into account.
2. Change the wrapper's align-items: center; to align-items: stretch;
It seems to me that you don't want the child to be vertically-aligned in the middle, but rather to take up the entire height of the wrapper. align-items: stretch will apply this behavior.
Updated Fiddle
/* TAGS */
body,
html {
height: 100%;
margin: 0;
padding: 0;
}
/* END OF TAGS */
/* WRAPPERS */
#wrapper-body {
height: 100%;
display: flex;
flex-direction: column;
}
#wrapper-header {
width: 100%;
flex: 0 1 50px;
background: url("header.png");
display: flex;
align-items: center;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
z-index: 5;
}
#wrapper-main {
flex: 1 1 auto;
display: flex;
align-items: stretch;
justify-content: center;
position: relative;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
padding: 25px;
}
#wrapper-footer {
width: 100%;
flex: 0 1 auto;
background-color: #212121;
}
/* END OF WRAPPERS */
/* CONTENT */
#menu {
display: flex;
flex-direction: row;
list-style-type: none;
right: 0;
position: absolute;
}
.menu-button {
background-color: #3B3B3B;
width: 100px;
height: 22px;
margin-right: 15px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
color: #F7F7F7;
border-radius: 2px;
font-family: "codropsicons", verdana;
font-weight: 700;
text-transform: uppercase;
font-size: 14px;
transition: 0.5s;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
text-shadow: 2px 1px 2px rgba(0, 0, 0, 0.3);
}
.active-button,
.menu-button:hover {
background-color: #E0962D;
}
#main {
background-color: green;
width: 100%;
}
#copyright {
height: 20px;
width: auto;
display: flex;
align-items: center;
font-family: "codropsicons", verdana;
font-weight: 700;
text-transform: uppercase;
font-size: 10px;
color: #F7F7F7;
margin-left: 15px;
opacity: 0.1;
}
<body>
<div id="wrapper-body">
<div id="wrapper-header">
<nav id="menu">
<a class="menu-button active-button">O nas</a>
<a class="menu-button">Oferta</a>
<a class="menu-button">Galeria</a>
<a class="menu-button">Kontakt</a>
</nav>
</div>
<div id="wrapper-main">
<main id="main">
Test<br> Test
<br>
</main>
</div>
<div id="wrapper-footer">
<div id="copyright">Koyot © 2017 All rights reserved</div>
</div>
</div>
</body>
Try adding this to the parent element:
box-sizing:border-box;
This changes how the width and height is calculated by the browser so it includes padding and borders. With flex, using border-box on the parent has corrected spacing issues.
I have a flexbox with a text overlay on top and everything looks fine when the browser is full width:
However, when I shrink the browser to smaller width, the overlay becomes wider than the image:
My HTML looks like this:
<a ng-if="::(options.link_template == 'Picture')" ng-href="{{::data.href}}" class="picture {{::options.class_name}}" target="{{::data.target}}">
<img src="{{::options.picture}}" alt="" width="100%" height="100%"/>
<h3><span>{{::options.title}}</span></h3>
</a>
And my CSS looks like this:
a.picture {
position: relative;
//width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
a.picture img {
width: 360px;
height: 238px;
}
a.picture > h3 {
margin: 0;
position: absolute;
width: 100%;
text-align: center;
}
a.picture > h3 span {
display: block;
color: white;
font-weight: bold;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(51, 103, 150, 0.6);
padding: 10px;
}
What am I missing from my CSS so that the overlay "locks" in with the image? Thanks!
Set the width of parent container equal to the image size.
a.picture {
position: relative;
width: 360px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
a.picture img {
width: 360px;
height: 238px;
}
a.picture > h3 {
margin: 0;
position: absolute;
width: 100%;
text-align: center;
top: 50%;
transform: translateY(-50%);
}
a.picture > h3 span {
display: block;
color: white;
font-weight: bold;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(51, 103, 150, 0.6);
padding: 10px;
}
<a class="picture">
<img src="https://static.pexels.com/photos/1510/road-sky-sand-street.jpg" width="100%" height="100%"/>
<h3><span>Content</span></h3>
</a>