I'm baffled. I've tried adding padding-top to my content, changing my nav from fixed to sticky, tried to hide with z-index etc...
My content doesn't scroll beneath the nav. they overlap.
nav {
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
}
.nav-center {
width: 90vw;
max-width: 600px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem 0;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
z-index: 1000;
}
.nav-center h1 {
font-size: 2.5rem;
text-transform: capitalize;
letter-spacing: 2px;
}
.articles {
padding: 2rem 0;
width: 90vw;
max-width: 600px;
margin: 0 auto;
/* padding-top: 128px; */
overflow: auto;
}
Related
I'm working on a website and made 4 images with hover effects.My problem is the gradient it's not covering the entire image and goes down below it a bit Any solutions
I tried
overflow:hidden;
But didn't do anything
.container {
width: 90%;
padding: 45px;
margin: 100px auto;
display: flex;
flex-direction: row;
justify-content: center;
}
.box {
position: relative;
width: 250px;
margin: 0px 10px;
box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
transition: 0.3s;
}
.box img {
border-radius: 5px;
}
.box:hover {
transform: scale(1.2);
z-index: 2;
}
.box img {
display: block;
width: 100%;
height: 100%;
background-size: contain;
text-align: center;
}
.box h2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
}
.box h2:hover {
opacity: 1;
}
I have a div that with an image in it
#slideshow {
line-height: 1;
position: relative;
/*height: 125px;*/
/*width: 100vw;*/
border-radius: 12px;
overflow: hidden;
margin-bottom: 5px;
margin-top: 10px;
}
#slideshow img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
margin: 0 auto;
overflow: hidden;
opacity: 0;
font-size: 15vw;
text-align: center;
color: rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: center;
border-radius: 12px;
}
<div id="slideshow">
<img alt="c" class="rectangle__image" src="/assets/media/ads-images/shad_NiOyJ1U.png">
</div>
I don't want to manually set the height of the image's parent; the height of the parent container should be contingent on the height of the image, but when I write the page this way, the image fails to display.
You need to remove position: absolute; from the img since absolute positioning removes the element from document's flow. Also you had set opacity to 0.
#slideshow {
line-height: 1;
position: relative;
/*height: 125px;*/
/*width: 100vw;*/
border-radius: 12px;
overflow: hidden;
margin-bottom: 5px;
margin-top: 10px;
}
#slideshow img {
width: 100%;
height: 100%;
margin: 0 auto;
overflow: hidden;
opacity: 1;
font-size: 15vw;
text-align: center;
color: rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: center;
border-radius: 12px;
}
<div id="slideshow">
<img alt="c" class="rectangle__image" src="https://source.unsplash.com/random">
</div>
Pen Link - https://codepen.io/techysharnav/pen/RwpByxW
Hello so I am trying to make a div appear when an element has been toggled. The function and events definitely work because if I remove the styling then the element appears but when I add it, it has disappeared and I actually have no idea why. It disappears when I add position:absolute but even when I put the height and width to 100% and it doesn't follow. Here is my Sandbox.
Here is my css:
* {
box-sizing: border-box;
}
html,
body,
#root {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
user-select: none;
background: lightblue;
}
.Main {
height: 100%;
width: 100%;
position: abosolute;
}
.Contain {
border-radius: 50%;
box-shadow: 50px rgba(0, 0, 0, 0.05);
position: absolute;
height: 50px;
width: 50px;
padding-left: 20px;
margin-bottom: 20px;
z-index: 998;
cursor: pointer;
}
.Contain p {
color: white;
}
.Item {
width: 100%;
height: 100%;
background: white;
border-radius: 5px 30px 30px 5px;
will-change: transform, opacity;
position: absolute;
display: inline-block;
bottom: 0.1%;
box-shadow: 50px rgba(0, 0, 0, 0.05);
}
.Item p {
color: black;
}
.Buttons {
top: 20%;
left: 25%;
z-index: 998;
position: absolute;
}
.Overlay {
background-color: #282c34;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.05);
z-index: 999;
position: absolute;
}
I would post the JSX but they're in different pages and it is probably easier to see the sandbox
Thank you!
So I figured out that what was causing issues with my style was my <a.div> around my overlay component that reduced the styling. So I made the styling for the div to be position: 'sticky' and top:0 and width and height to 100%.
Any children of another div would be styled in relative to fit the parent div so the parent div must be styled accordingly
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 3 years ago.
I am having an issue with my homepage - I do not have enough content for a fullpage and I am trying to set the position of this section above the footer at the bottom.
I had success with using positon: fixed; and bottom: 50px; to sit above my footer, however when I was opening the navigation on an ipad, the navigation would disappear behind the section.
I'm not sure how to tackle the problem, I was attempting to use vertical-align: bottom; but could not get it to work.
My CSS:
section.hero {
max-height: 400px;
text-align: center;
img.hero-responsive {
width: 100%;
height: 100px;
}
h2 {
width: 90%;
margin: 0 auto;
font-size: 1.5em;
top: -90px;
font-weight: 800;
position: relative;
}
h3 {
position: relative;
top: -60px;
font-weight: 800;
}
}
section.info {
background-color: #464646;
height: auto;
position: relative;
top: -50px;
width: 100vw;
padding: 0px;
left: -5px;
text-align: center;
color: white;
padding-bottom: 50px;
.row {
margin: 0px !important;
padding: 0px !important;
.col-lg-3 {
border-top: 2px solid rgba(160, 160, 160, 0.8);
margin-top: 5px !important;
padding: 0px !important;
i {
font-size: 40px;
padding: 10px;
margin: 25px !important;
padding: 0px !important;
}
i.laravel { color: #f05340; }
i.wordpress { color: #21759b; }
i.sass { color: #cd6799; }
img {
width: 50px;
height: 40px;
margin: 10px !important;
padding: 0px !important;
}
h2 {
margin: 0px !important;
padding: 0px !important;
}
p {
width: 95%;
margin: 0px auto 0px auto !important;
padding: 0px 0px 10px 0px !important;
}
}
}
}
#media only screen and (min-width: 768px) {
section.hero {
img.hero-responsive {
width: 450px;
}
h2 {
width: 400px;
top: -80px;
}
}
section.info {
top: auto;
position: absolute;
}
}
#media only screen and (min-width: 1000px) {
section.hero {
h3 {
top: -30px;
}
}
section.info {
min-height: 500px;
position: unset;
margin-left: -5px;
}
}
codepen: https://codepen.io/aparker611/pen/bGbQdqg
codep: https://codepen.io/aparker611/pen/bGbQdqg
<body class="Site">
<header>…</header>
<main class="Site-content">…</main>
<footer>…</footer>
</body>
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
You can try using flexbox. if you share a codepen or a full example it will more easy to help you
<body class="Site">
<header>…</header>
<main class="Site-content">…</main>
<footer>…</footer>
</body>
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
https://codepen.io/centrodph/pen/gOYQpBL
This is the website I'm currently working on and my problem is that I can't seem to find a way in which to set the footer at the bottom of the page under all the elements. I want the footer to have a position:fixed, but for it to be under the next page element that is at the bottom of the page.
Some of the code:
#footer {
clear: both;
margin: 0 auto;
position: fixed;
text-align: center;
bottom: 1%;
height: 6%;
width: 100%;
padding: 2%;
z-index: 500;
background-color: rgba(0, 0, 0, 0.6);
}
.content {
overflow: hidden;
background-color: #ffffff;
margin: 70px 0 0 0;
}
.content-middle {
float: left;
width: 50%;
}
.content-left {
float: left;
width: 56%;
}
.content-right {
float: right;
width: 60%;
}
Update Style using margin-bottom
#pagination
{
display: block;
text-align: center;
margin: 0 auto;
clear: both;
padding: 0.4% 0;
background-color: rgb(255, 255, 255);
color: #999;
font-size: 11px;
text-transform: uppercase;
margin-bottom: 150px;
}
Add remove White space then update style using height: auto !important;. because after your search result your li or class="reteta" set height:350px
#retete.simple-style li.reteta {
width: 98%;
max-width: 680px;
min-width: 280px;
height: auto !important;
float: none;
display: block;
background: none;
box-shadow: none;
}
or other wise only simple add style
#retete.simple-style li.reteta {
height: auto !important;
}
You can achieve this by adding a margin-bottom: 90px; to #pagination.
#pagination {
margin-bottom: 90px;
}
You can achieve this by adding a bottom: 0px; to footer
#footer {
clear: both;
margin: 0 auto;
position: fixed;
bottom: 0px
text-align: center;
bottom: 1%;
height:6%;
width: 100%;
padding:2%;
z-index:500;
background-color:rgba(0, 0, 0, 0.6);
}
The only diff is bottom:0px; .Try this