I am using Angular and trying to create a proper header. My content is overlapping on header as I scroll. When I tried to keep div-container class position as fixed still it gets distorted. I am trying to understand how can I keep header fixed so that the content does not overlap on header. The header code and app.component.html is as follows:
<div class="div-container">
<div class="frame">
<div class="frame-logo">
<img src="assets/Images/image21.svg" alt="image" class="image21" />
</div>
</div>
<span class="text203 body1Default">
<span class="text204">ML Platform</span>
</span>
</div>
CSS is:
.div-container {
min-height: 7vh;
}
.frame {
top: 0px;
left: 24px;
width: 688px;
display: flex;
position: absolute;
box-sizing: border-box;
align-items: center;
border-color: transparent;
}
.frame-logo {
margin: 0 64px 0 0;
display: flex;
padding: 8px;
position: relative;
box-sizing: border-box;
align-items: flex-start;
flex-shrink: 1;
border-color: transparent;
border-radius: 2px;
flex-direction: column;
background-color: var(--dl-color-white-whiteffffff60463);
}
.text203 {
top: 10px;
left: 78px;
color: var(--dl-color-blue-blue600dellblue0672cb347f1);
height: auto;
position: absolute;
align-self: auto;
text-align: left;
line-height: 36px;
text-decoration: none;
}
.text204 {
color: rgba(6, 114, 203, 1);
height: auto;
align-self: auto;
font-style: normal;
text-align: left;
font-weight: 300px;
font-stretch: normal;
text-decoration: none;
}
.body1Default {
font-size: 24px;
font-style: normal;
font-family: Roboto;
font-weight: 300px;
font-stretch: normal;
}
.image21 {
width: 201px;
height: 40px;
position: relative;
object-fit: cover;
border-color: transparent;
}
app.component.html
<app-header></app-header>
<div>
<router-outlet></router-outlet>
</div>
<app-footer></app-footer>
Related
I am trying to move this form but it keeps 'hitting' the h3 tag and the button. I want to move them around without them interfering with one another.
I am talking about the gray panel:
Even when resizing the window, they interact and push one another.
I have tried using margin and padding, but that doesn't seem to work.
.section-3 {
position: relative;
background-color: white;
height: 600px;
top: 959px;
text-align: center;
}
.join-btn {
height: 45px;
font-size: 16px;
text-transform: uppercase;
text-align: center;
border-radius: 2px;
padding: 9px 20px 7px;
color: #373f3d;
border: 2px solid rgba(55, 63, 61, 0.2);
}
.section-3 .heading_section_3 {
font-size: 20px;
position: absolute;
bottom: 70%;
}
.description {
position: absolute;
color: #6e6e6e;
padding-left: 200px;
padding-right: 200px;
}
.join-right-side {
overflow: auto;
background-color: #c9c8c8;
position: absolute;
height: 300px;
padding: 30px;
margin-left: 50%;
display: flex;
align-items: center;
justify-content: center;
width: 50%;
}
.Join-left-side {
overflow: auto;
position: absolute;
height: 300px;
padding: 30px;
background-color: #f5f5f1;
display: flex;
align-items: center;
justify-content: center;
width: 50%;
}
.text-join-left {
color: black;
text-align: center;
padding-left: 200px;
padding-right: 200px;
}
.form {
height: fit-content;
overflow: hidden;
}
input[type="email"] {
border-color: black;
border-width: 2px;
background-color: #c9c8c8;
box-sizing: border-box;
list-style: none;
direction: ltr;
box-sizing: border-box;
padding: 0;
margin: 200px 200px 0px 0px;
display: block;
width: 100%;
appearance: none;
background: none;
border: none;
color: #373f3d;
font-family: GT Pressura Mono, Roboto Mono, monospace;
font-size: 28px;
line-height: 28px;
font-weight: 400;
}
<div class="section-3">
<div class="join-right-side">
<div class="join-btn">Join</div>
<h3 class="text-join-left">Sign up and get 10% off your first purchase.</h3>
<form class="form" action="/">
<input
class="input"
placeholder="Your email address..."
type="email"
name="EMAIL"
/>
</form>
</div>
<div class="join-left-side">
<h2 class="heading_section_3">Swallowtail Tea</h2>
<h3 class="description">
Swallowtail Tea is a Virginia-based tea company sourcing only the highest
quality tea, herbs, and spices from around the world.
</h3>
</div>
</div>
I think it could be linked to the way I'm accessing the div classes, or to the structure of the div's.
You can try:
CSS
.section-3 {
display:flex;
justify-content: space-between;
}
.join-left-side , .join-right-side {
width : 50%;
height: 300px;
}
.section-3 {
position: relative;
background-color: white;
height: 600px;
top: 959px;
text-align: center;
}
.join-btn {
height: 45px;
font-size: 16px;
text-transform: uppercase;
text-align: center;
border-radius: 2px;
padding: 9px 20px 7px;
color: #373f3d;
border: 2px solid rgba(55, 63, 61, .2);
}
.section-3 .heading_section_3 {
font-size: 20px;
}
.description {
color: #6e6e6e;
}
.join-right-side {
background-color: #c9c8c8;
height: 300px;
padding: 30px;
display: flex;
align-items: center;
justify-content: center;
width: 50%;
}
.join-left-side {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.form{
height: fit-content;
overflow: hidden;
}
input[type=email] {
border-color: black;
border-width: 2px;
background-color: #c9c8c8;
box-sizing: border-box;
list-style: none;
direction: ltr;
box-sizing: border-box;
padding: 0;
margin: 200px 200px 0px 0px;
display: block;
width: 100%;
appearance: none;
background: none;
border: none;
color: #373f3d;
font-family: GT Pressura Mono,Roboto Mono,monospace;
font-size: 28px;
line-height: 28px;
font-weight: 400;
}
HTML
<div class="section-3">
<div class="join-left-side">
<h2 class="heading_section_3">Swallowtail Tea</h2>
<h3 class="description">
Swallowtail Tea is a Virginia-based tea company sourcing only the highest
quality tea, herbs, and spices from around the world.
</h3>
</div>
<div class="join-right-side">
<div class="join-btn">Join</div>
<h3 class="text-join-left">Sign up and get 10% off your first purchase.</h3>
<form class="form" action="/">
<input
class="input"
placeholder="Your email address..."
type="email"
name="EMAIL"
/>
</form>
</div>
</div>
I am currently working on a website and I have an element that I have explicitly declared: display: inline-block and visibility: visible however, the element is still invisible. This is only occurring on mobile devices. The invisible element is <div id="clock">.
#font-face {
font-family: 'bitwise';
src: url('bitwise.ttf');
font-display: swap;
}
* {
font-family: 'bitwise', monospace;
margin: 0;
padding: 0;
outline: 0;
}
:root {
background-color: #008080;
}
body,
html,
.wrapper {
width: 100%;
height: 100%;
}
span {
color: #FFFFFF;
font-size: 18pt;
text-align: center;
display: inline-block;
}
h1 {
color: #FFFFFF;
text-align: center;
display: inline-block;
}
input {
font-family: 'bitwise', monospace;
background-color: #535353;
color: #FFFFFF;
font-size: 18pt;
overflow: hidden;
text-align: center;
line-height: inherit;
height: inherit;
}
img:not(.noresize) {
width: 35%;
height: 35%;
}
video {
width: 35%;
height: 35%;
}
a:link {
color: #EFCF7C;
}
a:visited {
color: #105733;
}
button {
background-color: #105733;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
margin: 4px 2px;
}
#back {
background-color: #660000;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
margin: 4px 2px;
}
#taskbar {
position: absolute;
overflow: hidden;
bottom: 0;
width: 100%;
height: 27px;
background-color: silver;
box-shadow: inset 0px 1px #dfdfdf, inset 0px 2px #ffffff;
}
.center {
display: flex;
flex-wrap: wrap;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
align-items: center;
justify-content: center;
}
#start {
float: left;
}
#clock {
float: right;
position: relative;
text-align: center;
}
#clocktime {
font-family: 'Arial', serif;
font-size: 13px;
color: #000000;
position: relative;
bottom: 23px;
left: 17px;
}
#icons {
padding-top: 8px;
}
#content {
padding-top: 10px;
}
.break {
flex-basis: 100%;
height: 0;
}
#content {
width: 675px;
height: 300px;
}
#media screen and (max-width: 1079px) {
html,
body {
overflow: hidden;
}
#clock {
float: right;
position: relative;
bottom: 100px;
text-align: center;
display: inline-block;
visibility: visible;
}
#clocktime {
font-family: 'Arial', serif;
font-size: 13px;
color: #000000;
position: relative;
bottom: 23px;
left: 17px;
}
}
<div id="taskbar">
<div id="start"><img class="noresize" src="/assets/start.png"></div>
<div id="clock"><img class="noresize" src="/assets/clock.png">
<div id="clocktime"></div>
</div>
</div>
<div id="icons"><img class="noresize" src="/assets/icons.png"></div>
<div class="center"><img class="noresize" src="/assets/ie.png"></div>
<div class="center" id="content">
Content here.
</div>
Screenshot 1 - What the page should look like. Note the clock in the lower-right corner.
Screenshot 2 - What the page actually looks like on mobile.
Screenshot 3 - Chrome DevTools showing the element as being in a visible spot, but still not being visible.
I see that that css is only appliable when max-width is equal to 1079px.
Try to increase that number in inspector element to see what happens.
So it turns out I had overflow: hidden set on #taskbar and this means that any children inside of the taskbar will not display, even if they are in a "visible" area. Adding bottom: 32px to set it inside of the taskbar worked.
Updated CSS:
#taskbar {
position: absolute;
overflow: hidden;
bottom: 0;
width: 100%;
height: 27px;
background-color: silver;
box-shadow: inset 0px 1px #dfdfdf, inset 0px 2px #ffffff;
}
<snip>
#media screen and (max-width: 1079px) {
#clock {
bottom: 32px;
}
}
I have a website in which I have two buttons fixed in the bottom of my page like this:
And I have another div that is in the <footer> tag. So it looks like this:
<body>
...
<div class="fixed-to-bottom">
<input type="button" class="button1-in-bottom fixed-bottom" />
<input type="button" class="button2-in-bottom fixed-bottom" />
</div>
<footer>
<input type="button" class="button-in-footer" />
</footer>
</body>
This is the css that makes button1-in-bottomand button2-in-bottom be fixed at bottom:
.fixed-bottom {
position: fixed;
bottom: 0px;
z-index: 2;
left: 0;
}
When I scroll down (so I go to the bottom of the page) I want the bottom located in the footer be over the other two buttons like this:
But I don't find a way of how to do this. Can anybody help me find a solution to this problem? Thanks!
My snippet example:
body {
background-color: #cdcdcd;
}
.fixed-bottom-xs {
position: absolute;
bottom: 0;
z-index: 2;
left: 0;
}
.w-100 {
width: 100%;
}
#select-passengers {
margin-bottom: -1px!important;
}
.passengers-summary {
cursor: pointer;
background-color: white;
padding: 15px 15px 13px 15px;
position: relative;
}
.passengers-summary__label {
font-weight: bold;
display: inline-block;
vertical-align: middle;
margin-right: 25px;
}
.passengers-summary__passengers {
display: inline-block;
vertical-align: middle;
}
.passengers-summary__passenger {
display: inline-block;
color: #4D4D4D;
font-weight: bold;
margin-right: 5px;
}
.passengers-summary__passenger--adult:before {
content: "\e916";
}
.passengers-summary__passenger:before {
font-size: 22px;
color: #02A39C;
margin-right: 3px;
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
}
.btn {
background-color: #FFA745;
display: inline-block;
width: auto;
padding: 16px 12px 15px;
font-family: "Montserrat", sans-serif, "Verdana";
font-weight: bold;
font-size: 16px;
line-height: 19px;
text-align: center;
color: #fff;
border-radius: 8px;
text-decoration: none;
border: none;
}
.btn--no-radius {
border-radius: 0;
}
.btn--block {
display: block;
width: 100%;
}
.footer__container {
background-color: #F0F0F0;
padding: 15px 0;
width: 100%;
position: fixed;
bottom: 0;
}
#media only screen and (min-width: 0px)
.container {
width: 100%;
}
.container {
margin: 0 auto;
padding: 0 10px;
}
.footer {
display: -webkit-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-moz-justify-content: center;
justify-content: center;
-ms-flex-negative: 0;
flex-shrink: 0;
position: relative;
}
<body>
<div class="fixed-bottom-xs w-100 mobile-only" >
<div class="w-100 mobile-only cta-bottom">
<div class="passengers-summary" data-show="#passengers_layer" id="select-passengers">
<div class="passengers-summary__content">
<span class="passengers-summary__label">Passengers</span>
<div class="passengers-summary__passengers">
<div class="passengers-summary__passenger--adult passengers-summary__passenger">x1</div>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn--block btn--no-radius">Continue</button>
</div>
<footer class="footer__container">
<div class="container">
<div class="footer">
<div class="footer__links">
<p class="footer__link" data-modal-open="modal-legal">Aviso legal, política de privacidad y cookies</p>
</div>
</div>
</div>
</footer>
</body>
As you can see, the footer is behind the bottom buttons. But when I scroll down, I want the button-in-footer appear over the button1-in-bottom. Any idea on how I can achieve that?
You can set bottom value of .fixed-bottom-xs div equal to height of footer so that they are not overlapping each other
body {
background-color: #cdcdcd;
}
.fixed-bottom-xs {
position: absolute;
bottom: 80px; /* set value equal to height of footer*/
z-index: 2;
left: 0;
}
.w-100 {
width: 100%;
}
#select-passengers {
margin-bottom: -1px!important;
}
.passengers-summary {
cursor: pointer;
background-color: white;
padding: 15px 15px 13px 15px;
position: relative;
}
.passengers-summary__label {
font-weight: bold;
display: inline-block;
vertical-align: middle;
margin-right: 25px;
}
.passengers-summary__passengers {
display: inline-block;
vertical-align: middle;
}
.passengers-summary__passenger {
display: inline-block;
color: #4D4D4D;
font-weight: bold;
margin-right: 5px;
}
.passengers-summary__passenger--adult:before {
content: "\e916";
}
.passengers-summary__passenger:before {
font-size: 22px;
color: #02A39C;
margin-right: 3px;
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
}
.btn {
background-color: #FFA745;
display: inline-block;
width: auto;
padding: 16px 12px 15px;
font-family: "Montserrat", sans-serif, "Verdana";
font-weight: bold;
font-size: 16px;
line-height: 19px;
text-align: center;
color: #fff;
border-radius: 8px;
text-decoration: none;
border: none;
}
.btn--no-radius {
border-radius: 0;
}
.btn--block {
display: block;
width: 100%;
}
.footer__container {
background-color: #F0F0F0;
padding: 15px 0;
width: 100%;
position: fixed;
bottom: 0;
}
#media only screen and (min-width: 0px)
.container {
width: 100%;
}
.container {
margin: 0 auto;
padding: 0 10px;
}
.footer {
display: -webkit-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-moz-justify-content: center;
justify-content: center;
-ms-flex-negative: 0;
flex-shrink: 0;
position: relative;
}
<body>
<div class="fixed-bottom-xs w-100 mobile-only" >
<div class="w-100 mobile-only cta-bottom">
<div class="passengers-summary" data-show="#passengers_layer" id="select-passengers">
<div class="passengers-summary__content">
<span class="passengers-summary__label">Passengers</span>
<div class="passengers-summary__passengers">
<div class="passengers-summary__passenger--adult passengers-summary__passenger">x1</div>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn--block btn--no-radius">Continue</button>
</div>
<footer class="footer__container">
<div class="container">
<div class="footer">
<div class="footer__links">
<p class="footer__link" data-modal-open="modal-legal">Aviso legal, política de privacidad y cookies</p>
</div>
</div>
</div>
</footer>
</body>
You should give your footer a fixed position and z-index higher than the the div or the buttons,like below :
.fixed-to-bottom {
position: fixed;
bottom: 0px;
z-index: 2;
left: 0;
}
.button-in-footer
{
position:fixed;
bottom:0;
z-index:3;
}
<body>
<div class="fixed-to-bottom">
<input type="button" class="button1-in-bottom fixed-bottom" value="button 1" />
<input type="button" class="button1-in-bottom fixed-bottom" value="button 2" />
</div>
<footer>
<input type="button" class="button-in-footer" value="your footer over" />
</footer>
</body>
I am running into some issues with resizing of the window (shrinking). When I shrink it down, the background colors no longer stay at the edge of the viewport, and content goes beyond it.
I thought that setting the width on the entire body to 100% would fix that, but it didn't?
Here is a JSFiddle of my current code, for the index page and the stylesheet:
* {
margin: 0;
padding: 0;
}
body {
font-family: Segoe UI, helvetica, arial;
display: flex;
flex-direction: column;
min-height: 100vh;
font-size: 18px;
width: 100%;
}
a {
color: hsl(344, 69%, 70%);
font-weight: bold;
}
a:hover {
text-decoration: none;
color: #67c3b2;
}
.menu-container {
background-color: rgba(150, 150, 150, 0.2);
padding: 20px 0;
display: flex;
justify-content: center;
text-transform: uppercase;
width: 100%;
}
.menu {
width: 90%;
display: flex;
top: 10px;
justify-content: space-between;
font-size: 16px;
overflow: hidden;
position: relative;
left: 10px;
}
.header-container {
background-color: rgba(150, 150, 150, 0.2);
display: flex;
justify-content: center;
height: 30px;
width: 100%;
position: relative;
}
.logo {
position: relative;
bottom: 37px;
z-index: 1;
}
.flex-container {
display: flex;
justify-content: center;
}
.flex-container p {
position: relative;
margin-left: 40px;
margin-right: 40px;
font-weight: bold;
top: 40px;
margin-top: 40px;
text-align: center;
}
.main {
display: flex;
color: #464646;
background: linear-gradient(to right, #77C9D4, #57BC90);
flex: 1;
}
.cakelist {
position: relative;
bottom: 50px;
display: flex;
font-weight: bold;
list-style-position: inside;
margin-top: 130px;
}
.cakelist ol,
table {
margin-left: 25px;
}
.cakelist h2 {
margin-left: 25px;
margin-top: 20px;
}
.carousel {
color: #464646;
top: 80px;
position: relative;
display: flex;
justify-content: center;
border: 3px outset gray;
align-items: center;
padding: 60px 60px 60px 60px;
}
.buttons {
position: relative;
width: 1600px;
margin-right: 25px;
justify-content: space-around;
display: flex;
top: 160px;
text-align: center;
}
.button a:hover {
opacity: 0.2;
}
.buttons p {
margin-top: 20px;
}
.buttons img {
padding-top: 25px;
height: 200px;
}
.gallery {
position: relative;
top: 80px;
}
.pricing {
display: flex;
position: relative;
top: 80px;
justify-content: center;
flex-direction: column;
padding-bottom: 140px;
}
.pricing p,
h1 {
margin-left: 250px;
text-align: left;
margin-top: 5px;
}
.pricing span {
opacity: 0;
user-select: none;
}
.order {
position: relative;
border-radius: 5px;
background: hsl(344, 69%, 70%);
top: 20px;
margin-top: 60px;
padding: 5px;
}
#order-link {
color: white;
text-decoration: none;
}
.order-button {
width: 180px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.footer-container {
display: flex;
justify-content: flex-end;
align-items: center;
background: #9A9A9A;
height: 90px;
max-height: 90px;
}
.footer-logo {
height: 80px;
position: relative;
right: 10px;
}
.subscribe {
border-radius: 25px;
background: hsl(344, 69%, 70%);
padding: 5px 20px 5px 20px;
width: 80px;
}
#subscribe-link {
position: relative;
color: white;
text-decoration: none;
right: 40px;
}
<div class="menu-container">
<div class="menu">
<div class="flex-item">About Us</div>
<div class="flex-item">Cakes</div>
<div class="flex-item">Cupcakes</div>
<div class="flex-item">Gallery</div>
<div class="flex-item">Prices/Order</div>
<div class="flex-item">Search</div>
</div>
</div>
<header class="header-container">
<img src="TCCLogo.png" class="logo" />
</header>
<div class="flex-container main">
<div class="container">
<div class="carousel">
Here is where I will have the quick gallery/carousel when I get to JS.
</div>
<div class="buttons">
<div class="button">
<img src="cake.png" />
<p>Check out our delicious cake options!</p>
</div>
<div class="button">
<img src="cupcake.png" />
<p>Check out our delicious cupcake options!</p>
</div>
<div class="button">
<img src="prices.png" />
<p>Check out our competitive pricing!</p>
</div>
</div>
</div>
</div>
<footer class="footer-container">
<a id="subscribe-link" target="_blank" href="#">
<div class="subscribe">
<p>Subscribe</p>
</div>
</a>
<img src="TCCLogo.png" class="footer-logo" />
</footer>
I have tried going through my stylesheet, changing the widths on anything I have set with pixels to percentages, but it didn't seem to fix it. The only thing that -sort of- worked was changing the body position to fixed, but then none of the content was view-able if it got shrunk down, all it fixed was keeping the background/header/footer colors the same.
I imagine maybe my coding is a bit messy - I tried my best to be extensible, but being 100% new at this made it difficult.
Your problem is that you have width:1600px in .buttons just remove it and also add box-sizing:border-box to all (pseudo-)elements
EDIT:
you also need to add max-width:100% to .container and flex-wrap:wrap in .buttons
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box
}
body {
font-family: Segoe UI, helvetica, arial;
display: flex;
flex-direction: column;
min-height: 100vh;
font-size: 18px;
}
a {
color: hsl(344, 69%, 70%);
font-weight: bold;
}
a:hover {
text-decoration: none;
color: #67c3b2;
}
.menu-container {
background-color: rgba(150, 150, 150, 0.2);
padding: 20px 0;
display: flex;
justify-content: center;
text-transform: uppercase;
width: 100%;
}
.menu {
width: 90%;
display: flex;
top: 10px;
justify-content: space-between;
font-size: 16px;
overflow: hidden;
position: relative;
left: 10px;
}
.header-container {
background-color: rgba(150, 150, 150, 0.2);
display: flex;
justify-content: center;
height: 30px;
width: 100%;
position: relative;
}
.logo {
position: relative;
bottom: 37px;
z-index: 1;
}
.flex-container {
display: flex;
justify-content: center;
}
.flex-container p {
position: relative;
margin-left: 40px;
margin-right: 40px;
font-weight: bold;
top: 40px;
margin-top: 40px;
text-align: center;
}
.main {
display: flex;
color: #464646;
background: linear-gradient(to right, #77C9D4, #57BC90);
flex: 1;
}
.cakelist {
position: relative;
bottom: 50px;
display: flex;
font-weight: bold;
list-style-position: inside;
margin-top: 130px;
}
.cakelist ol,
table {
margin-left: 25px;
}
.cakelist h2 {
margin-left: 25px;
margin-top: 20px;
}
.container {
max-width: 100%
}
.carousel {
color: #464646;
top: 80px;
position: relative;
display: flex;
justify-content: center;
border: 3px outset gray;
align-items: center;
padding: 60px;
}
.buttons {
position: relative;
margin-right: 25px;
justify-content: space-around;
display: flex;
flex-wrap: wrap;
top: 160px;
text-align: center;
}
.button a:hover {
opacity: 0.2;
}
.buttons p {
margin-top: 20px;
}
.buttons img {
padding-top: 25px;
height: 200px;
}
.gallery {
position: relative;
top: 80px;
}
.pricing {
display: flex;
position: relative;
top: 80px;
justify-content: center;
flex-direction: column;
padding-bottom: 140px;
}
.pricing p,
h1 {
margin-left: 250px;
text-align: left;
margin-top: 5px;
}
.pricing span {
opacity: 0;
user-select: none;
}
.order {
position: relative;
border-radius: 5px;
background: hsl(344, 69%, 70%);
top: 20px;
margin-top: 60px;
padding: 5px;
}
#order-link {
color: white;
text-decoration: none;
}
.order-button {
width: 180px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.footer-container {
display: flex;
justify-content: flex-end;
align-items: center;
background: #9A9A9A;
height: 90px;
max-height: 90px;
}
.footer-logo {
height: 80px;
position: relative;
right: 10px;
}
.subscribe {
border-radius: 25px;
background: hsl(344, 69%, 70%);
padding: 5px 20px 5px 20px;
width: 80px;
}
#subscribe-link {
position: relative;
color: white;
text-decoration: none;
right: 40px;
}
<div class="menu-container">
<div class="menu">
<div class="flex-item">About Us</div>
<div class="flex-item">Cakes</div>
<div class="flex-item">Cupcakes</div>
<div class="flex-item">Gallery</div>
<div class="flex-item">Prices/Order</div>
<div class="flex-item">Search</div>
</div>
</div>
<header class="header-container">
<img src="TCCLogo.png" class="logo" />
</header>
<div class="flex-container main">
<div class="container">
<div class="carousel">
Here is where I will have the quick gallery/carousel when I get to JS.
</div>
<div class="buttons">
<div class="button">
<img src="cake.png" />
<p>Check out our delicious cake options!</p>
</div>
<div class="button">
<img src="cupcake.png" />
<p>Check out our delicious cupcake options!</p>
</div>
<div class="button">
<img src="prices.png" />
<p>Check out our competitive pricing!</p>
</div>
</div>
</div>
</div>
<footer class="footer-container">
<a id="subscribe-link" target="_blank" href="#">
<div class="subscribe">
<p>Subscribe</p>
</div>
</a>
<img src="TCCLogo.png" class="footer-logo" />
</footer>
I have made it proper as you needed. And it's working for me.
Please add below css
.container, .buttons {
max-width: 100%;
}
I'm trying to position a circular instagram icon so it is always centered towards the bottom of a landing page. All my efforts so far such as using position:fixed; have resulted in the icon not remaining underneath the rest of my content when the screen size changes.
My html is like this:
<!DOCTYPE html>
<html>
<head>
<title>RBM Makeup</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<h1> Rebecca Bermingham Maguire</h1>
<div class="container">
Portfolio
Contact
About Me
</div>
</div>
</div>
<div class="footer">
<div class="instagram">
</div>
</div>
</section>
</body>
</html>
And my CSS is like this:
:root{
--maroon: #85144b;
--fuchsia: #f012be;
--purple: #b10dc9;
--lime: #01ff70;
--black: #000000;
--white: #ffffff;
--blue: #89cff0;
}
#font-face{
font-family: 'milkshake';
src:url(fonts/Milkshake.ttf);
font-style: normal;
font-weight: 100;
}
#font-face{
font-family: 'amble';
src:url(fonts/Amble-Regular.ttf);
font-style: normal;
font-weight: 100;
}
html, body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
/**/
.intro{
height:100%;
width:100%;
margin-right: 20px;
margin: auto;
background: url("images/eye.jpg") no-repeat 50% 50%;
display: table;
top: 0;
background-size: cover;
opacity: 0.92;
}
.intro .inner{
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content h1{
color: var(--black);
font-size: 350%;
margin: 0px 0px;
text-align: center;
text-transform: bold;
font-family: milkshake;
font-weight: 100;
}
.container{
display: flex;
flex-wrap: wrap;
overflow: hidden;
justify-content: center;
margin-top: 50px;
}
.container a{
border-radius: 9px;
color: var(--black);
font-size: 135%;
padding: 10px 20px;
text-decoration: none;
border: solid var(--black) 5px;
text-transform: uppercase;
margin: 20px 40px;
font-family: amble;
font-weight: 150;
font-style: bold;
}
/*Instagram Icon*/
.fa {
padding: 20px;
font-size: 55px;
width: 40px;
text-align: center;
text-decoration: none;
border-radius: 50%;
align-content: center;
}
.fa:hover{
opacity:0.7;
}
.fa-instagram {
background: var(--black);
color: var(--white);
}
.footer{
position: fixed;
bottom: 0;
width: 100%;
height: 100px;
left: 47.5%;
}
Any help would be greatly appreciated, thanks :)
Modified two places of your code.
1. .foot
left: 50% plus margin-left: - { width } / 2 can make footer align center no matter how the window changes.
```
.footer {
position: fixed;
bottom: 0;
width: 95px; // here
height: 100px;
left: 50%; // here
margin-left: calc(-95px / 2); // here
}
```
2. .fa
In your code, the Instagram icon is not aligning center inside the black circle, so I make some changes for it.
As the Instagram icon is square, you should not set the width 40px when it's font-size is 55px.
```
.fa {
padding: 20px;
font-size: 55px;
width: 55px; /* here */
text-align: center;
text-decoration: none;
border-radius: 50%;
align-content: center;
}
```
If you have more questions about my answer, feel free to contact me :)
:root {
--maroon: #85144b;
--fuchsia: #f012be;
--purple: #b10dc9;
--lime: #01ff70;
--black: #000000;
--white: #ffffff;
--blue: #89cff0;
}
#font-face {
font-family: 'milkshake';
src: url(fonts/Milkshake.ttf);
font-style: normal;
font-weight: 100;
}
#font-face {
font-family: 'amble';
src: url(fonts/Amble-Regular.ttf);
font-style: normal;
font-weight: 100;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
/**/
.intro {
height: 100%;
width: 100%;
margin-right: 20px;
margin: auto;
background: url("images/eye.jpg") no-repeat 50% 50%;
display: table;
top: 0;
background-size: cover;
opacity: 0.92;
}
.intro .inner {
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content h1 {
color: var(--black);
font-size: 350%;
margin: 0px 0px;
text-align: center;
text-transform: bold;
font-family: milkshake;
font-weight: 100;
}
.container {
display: flex;
flex-wrap: wrap;
overflow: hidden;
justify-content: center;
margin-top: 50px;
}
.container a {
border-radius: 9px;
color: var(--black);
font-size: 135%;
padding: 10px 20px;
text-decoration: none;
border: solid var(--black) 5px;
text-transform: uppercase;
margin: 20px 40px;
font-family: amble;
font-weight: 150;
font-style: bold;
}
/*Instagram Icon*/
.fa {
padding: 20px;
font-size: 55px;
width: 55px; /* need to fit the font-size */
text-align: center;
text-decoration: none;
border-radius: 50%;
align-content: center;
}
.fa:hover {
opacity: 0.7;
}
.fa-instagram {
background: var(--black);
color: var(--white);
}
.footer {
position: fixed;
bottom: 0;
width: 95px;
height: 100px;
left: 50%;
margin-left: calc(-95px / 2);
}
<section class="intro">
<div class="inner">
<div class="content">
<h1> Rebecca Bermingham Maguire</h1>
<div class="container">
Portfolio
Contact
About Me
</div>
</div>
</div>
<div class="footer">
<div class="instagram">
</div>
</div>
</section>
set the parent as
.intro {
width:100%;
height:100vh;
position:relative;
}
and the icon element as
.footer {
position:absolute;
bottom:0;
left:50%;
width:40px;
margin-left:-20px;
}
as an alternative:
.footer {
position:absolute;
bottom:0;
left:0;
width:100%;
text-align:center;
}
.footer > div {
display:inline-block;
}
this will do better as you can add other elements if you end up wanting to add other links