There's a way to auto fit my div inside my image without use of % in my css? I can fit it using % , but I can't get responsive . PS : I want to add an scroll inside my div, that my text fit inside my screen and I can scroll it inside
where my screen is an IMG and my text inside my div
.Screen{
position: absolute;
top: 20%;
right: 10%;
width: 80%;
z-index: 1;
}
.text{
position: absolute;
top: 23%;
right: 14%;
overflow: auto;
width: 73%;
height: 35%;
}
.Screen{
position: relative;
top: 20%;
right: 10%;
}
.text{
position: absolute;
top: 10px;
right: 10px;
left: 10px;
bottom: 10px;
overflow-y: scroll;
}
You can use this. As there were no image in the post you have to adjust the values accordingly. Let me know if you stuck anywhere! Happy coding!
Related
I have a button which creates a popup and makes the background of my page black. This works however it doesn't affect any bootstrap containers. I am currently using bootstrap 4 and react.
My css for this pop is below
.popup {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: rgba(0,0,0, 0.5) !important;
}
.popupInner {
position: absolute;
left: 25%;
right: 25%;
top: 25%;
bottom: 25%;
margin: auto;
border-radius: 20px;
position: absolute;
left: 25%;
right: 25%;
top: 25%;
bottom: 25%;
margin: auto;
background: white;
}
Anyone have any insight on how to target these containers.
Setting a z-index on popup will probably fix it (e.g. z-index: 1).
If that doesn't fix it, you may need to set a lower z-index on those bootstrap elements (e.g. z-index: 0)
I want to make responsive image once the size becomes smaller it moves to bottom from the top right position. also I'm using material ui but can't find any help of it in this
.my-photo{
height: 300px;
position: absolute;
right: 50px;
top: 150px;
border-radius: 50%;
}
#media(max-width:800px){
.my-photo{
height: 250px;
position: absolute;
right:auto ;
top: 500px;
border-radius: 50%;
}
}
try using the bottom style:
.my-photo{
height: 300px;
position: absolute;
right: 50px;
top: 150px;
border-radius: 50%;
}
#media(max-width:800px){
.my-photo{
height: 250px;
right: auto;
bottom: 0;
}
}
plus try not to copy unnecessary styles in #media
I'm trying to center an element with percent, but it don't work! Have I missed something or is the way I'm doing it impossible?
When I'm using this setting, the element is almost touching the top of the browser area.
.modal-box {
position: fixed;
z-index: 1000;
width: 50%;
height: 50%;
top: 50%;
left: 50%;
margin-top: -25%;
margin-left: -25%;
}
Because everything is in %, you should just define width + height and top + left positions, not margin:
.modal-box {
height: 50%;
left: 25%;
position: fixed;
top: 25%;
width: 50%;
z-index: 1000;
}
JsFiddle: http://jsfiddle.net/ghorg12110/ob29nn2u/
html,
body {
width: 100%;
height: 100%;
}
.modal-box {
background-color: red;
height: 50%;
left: 25%;
position: fixed;
top: 25%;
width: 50%;
z-index: 1000;
}
<div class="modal-box"></div>
Instead of margins, use a transform. This will center the box regardless of height/width.
.modal-box {
position: fixed;
z-index: 1000;
width: 50%;
height: 50%;
top: 50%;
left: 50%;
background: red;
transform: translate(-50%, -50%);
}
<div class="modal-box"></div>
If you want to center with percents, you will need to know the width of an element.
so say modal-box was 300px wide, you would do something like this:
.modal-box{
width:300px;
position:fixed;
left:50%;
margin-left: -150px; /*1/2 of your divs width*/
}
Why are you adding
margin-top: -25%;
margin-left: -25;
That negates the position: fixed of what you were trying to achieve. Remove those two lines and you will see how you can have your fixed position of the element.
If you want it relative to the viewport (irrespective of parent), then make use of the viewport-relative-lengths
.modal-box {
border: 1px solid #000;
position: fixed;
z-index: 1000;
width: 50vw; height: 50vh;
top: 50vh; left: 50vw;
margin-top: -25vh; margin-left: -25vw;
}
<div class="modal-box"></div>
This is driving me nuts.
The situation is as follows.
I have 1 wrapper div that needs to span the entire width / height of the screen.
I need 1 div that is positioned on the right hand of the screen and has a fixed width (eg. 100px;).
Then the other div needs to span the remaining left half of the screen (no further !).
Note: I don't want to float the elements, I really need the divs to span the entire height of the screen, because a Google Map will be loaded into the div.
I am aware of the calc function in css, but I don't want to use it, because IE8 doesn't support it.
http://jsfiddle.net/gze4vcd2/
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
</div>
#wrapper{
position: relative;
width: 100%;
height: 100%;
background: greenyellow;
}
#left{
position: absolute;
left: 0;
width: auto;
background: blue;
}
#right{
position: absolute;
right: 0;
height: 100%;
width: 200px;
background: yellow;
}
This doesn't work at all.
I have tried all sorts of things, but I just can't get it to work.
Have you tried to use position: fixed for your #Wrapper
#wrapper{
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: greenyellow;
}
#left{
background: red;
position: fixed;
left: 0;
top: 0;
height: 100%;
right: 100px;
}
#right{
background: blue;
position: fixed;
width: 100px;
top: 0;
height: 100%;
right: 0px;
bottom: 0px
}
Above is the updated code that works for me
I have a top header <div id="header"></div>, a middle part <div id="content"></div> and a bottom footer <div id="footer"></div>.
Header and footer has fixed heights 50px. I want to fix the positions of header and footer on top and bottom and I want to stretch the middle part (content) to fill the remaining space.
How can I do this?
You can use position: absolute on footer and header an then position the footer with bottom: 0px. I would do it this way:
#header {
height: 50px;
width: 100%;
position: fixed;
top: 0px;
z-index: 2;
}
#footer {
height: 50px;
width: 100%;
position: fixed;
bottom: 0px;
z-index: 2;
}
#content {
top: 50px;
width: 100%;
position: absolute;
z-index: 1;
}
I made it by defining the style as below;
#header, #content, #footer {
position: absolute;
}
#header{
top: 0;
width: 100%;
height: 50px;
left: 0;
right: 0;
}
#content {
top: 50px;
left: 0;
right: 0;
bottom: 50px;
}
#footer {
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 50px;
}
You can see my fiddle here
Thanks #rocky3000 and #Mika for support :)
Search for sticky footers LINK here on stackoverflow or with google and the problem is gone.