Please see the following page:
https://dogcollars-3.myshopify.com/products/short-sleeve-t-shirt
I am trying to fix the position of the "order details" box so it stay at prominent position and content behind it scroll. This is a Shopify prebuilt theme. I have applied the following additional CSS:
#media only screen and (min-width: 1000px) {
.product-single {
width: 70%;
height: auto;
position: relative;
}
.order-details {
width: 300px;
height: auto;
padding: 10px;
top: 50px;
left: 70%;
background: rgba(255,255,0,0.2);
position: fixed;
}
}
The 'order details' element is positioned correctly but not fixed. This element scrolls along with the content behind this layer.
Problem is with transform: translate3d styles on element .page-container.
Commenting these styles the problem goes away, 'Others detail' element would be fixed. You can try to comment/uncommend in the fiddle below.
https://jsfiddle.net/nLbntzqk/
EDIT: Now I've found more info, see 'transform3d' not working with position: fixed children for more detail explanation.
Related
Hey Stackoverflow Community,
I have a simple lightbox script with a few images on the page, but it somehow doesn't work as it should. When I use position:fixed on then the overlay, then it is full and the image sticks to the top, but when I use position:absolute, then it is cut half way through page and the image is gone to the top.
There must be something really easy I am missing, right? Maybe my HTML structure is wrong?
The error can be found here live - http://kriskorn.eu/lightbox-error/
Thank you for all the help!
Kris
here are two issues
1) you are using padding-top: 700px; in .main p which force the images to go down the page . and with position absolute the images can never display with overlay. the overlay div will go up with scroll .here position:fixed can work .Reason is with position fixed the content will move upside and the overlay will stay on fixed position.
2) you should use opacity:0.* or any light color .you are using 0.95 which will not display the content below the div.
this should work please check
#overlay {
background-color: rgba(255,255,255,0.3);
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
/* display: none; */
}
with position absolute it will not cover all the page.
this is surprising. Why you are using this ??
.main p {
padding-top: 700px;
}
this can also be an option.
.main p {
padding-top: 10px;
}
#overlay {
background-color: rgba(255,255,255,0.3);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
/* display: none; */
text-align: center;
}
It seems that the answer I was looking for is, that you can't have position:absolute without some kind of JavaScript code. I used position:fixed after all, because that was already working for me.
http://jsfiddle.net/leongaban/6rd2hhpq/8/
I'm working with a fixed position div and making elements scrollable from inside it. Similar to this problem here.
I was able to get the scrollbars to show up, my problem is that I have a fixed header, and my fixed sidebar has to be pushed down in my view.
This allows the user to keep scrolling past the browser window so you lose sight of the scroller.
Is there anyway to keep the scrollbar in view with my example?
So that when the scroller hits and stops at the bottom of the view, you also see the last item.
.red-box {
position: fixed;
width: 100%;
height: 40px;
color: white;
background: red;
}
.sidebar {
position: fixed;
top: 60px;
overflow-y: auto;
margin-left: 20px;
width: 180px;
height: 100%;
}
If I understand the issue correctly - you want the fixed element to fill the screen apart from the header height... then you could try :
.not-stuck {
height: calc(100% - 60px);
}
Looking at the other solutions on the page that was linked to, my personal second choice would be to use JavaScript (but the question doesn't have that tag of course).
I changed the height to 90% and it seemed to work:
.not-stuck {
position: fixed;
top: 60px;
overflow-y: auto;
margin-left: 200px;
width: 180px;
height: 90%;
}
I have the following CSS code for the #Wall div:
#Wall {
z-index:0;
position: absolute;
left: 50%;
top: 0px;
margin-left: -952px;
width: 1920px;
height: 1200px;
overflow: hidden;
}
This forms a wallpaper advertising image which is clickable. Unfortunately, the overflow function does not work and browser places a horizontal scroll for the right part of the image. How to fix this and hide the part of the image which should be seen only on higher resolution screens?
I fixed the problem by adding the overflow code in the body {}, too.
Thanks indeed.
I'm trying to achieve the following with CSS:
I want a fixed sidebar with navigation, so that when you scroll down, the sidebar stays in it's place. The remaining space on the right should be filled up with my content, as if it were the body at 100%.
However, my problem is that the right part takes exactly 300px more space on the right, resulting in a horizontal scroll bar.
I can't fid a solution on my own, can anybody help me? Thanks a lot! :)
JSFIDDLE: http://jsfiddle.net/ALGpP/4/
nav {
height: 100%;
width: 300px;
position: fixed;
z-index:99;
}
#wrapper {
overflow: hidden;
position: absolute;
width: 100%;
margin-left:300px;
}
Do you mean something like this?
I gave the #wrapper element some new CSS properties:
height: 1200px;
background-color: red;
The height: 1200px is in this case just for testing, to make the page longer.
The background-color: red is also just for testing to make it more visible.
Your nav element i have given the following css properties:
height: 100%;
width: 20%;
position: fixed;
background-color: green;
The height: 100% is used to make the element fill the page in the height
The width: 20% is used to make it 20% width.
The position: fixedis to make the element stick to a certain point at the page.
The background-color is used for testing, so you can see better what you're doing.
Also, i reccomend using a CSS reset. This is a really simple one im using in the fiddle:
* {
margin: 0;
padding: 0;
}
It basicly selects all elements and gives it a margin and padding of 0.
If you want the nav element to be 300px wide, use this fiddle.
Fix for the content that wasnt showing
Add the following properties to your #wrapper element:
width: calc(100% - 300px);
float: right;
So it looks like this:
#wrapper {
width: calc(100% - 300px);
height: 1200px;
background-color: red;
float: right;
}
Demo here
I'm currently working on this site and I want the footer to be 100% (width) of the screen but it has refused to respond no matter what I do. I've checked to see if the ID has a duplicate but I saw nothing. The CSS code is as shown below:
#footer {
width: 100%;
clear: both;
height: 400px;
background-color: #293D61;
}
Your footer is a nested div inside #rack. At 100%, your footer will only be as wide as your outer/parent div. You need to move it out of the parent div and make it a sibling
Try doing it this way,
#footer {
position: absolute;
bottom: 0;
width: 100%;
clear: both;
height: 400px;
background-color: #293D61;
}
Check whether your footer is is in inside some other div...? if so then it will not be of full page length....