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
Related
i'm struggling with CSS trying to create special shape.
This is the shape i wanna create
enter image description here
Do you have any solution ?
Thank's
How about this:
div {
position: relative;
height: 300px;
overflow: hidden;
border-radius: 25px;
}
.bg {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
background-color: blue;
transform: skewY(-6deg);
transform-origin: top right;
border-radius: 25px;
<div>
<div class="bg"></div>
</div>
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!
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 center absolute position div that has max-width.
#confirmation-popup {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
max-width: 500px;
height: 150px;
padding: 12px;
background-color: #4e4e4e;
}
This does not work in IE.
max-width doesn't work in IE. better use width or you can use translate technique.
here is the snippet:
#confirmation-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: auto;
max-width: 500px;
height: 150px;
padding: 12px;
background-color: #4e4e4e;
}
<div id="confirmation-popup">this is demo</div>
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>