Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed last month.
Improve this question
I have a modal that I resized and looks like this at zoom 80% of my browser:
My problem is when I increase or decrease my browser zoom, my modal does not adjust automatically with my browser zoom and it becomes like this :
Here is my CSS code :
.resizeModal {
width: 99vw;
right: 500px;
position: relative;
}
Is there anyway to automatically center my interface whether I increase or decrease my browser zoom?
Try using the margin auto to automatically center:
.resizeModal {
width: 99vw;
right: 500px;
position: relative;
margin: auto;
}
If the first method doesn't work for you, you can combine it with position absolute and all borders to 0 as follows:
position: absolute; /* Position the element absolutely */
.resizeModal {
width: 99vw;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
Hope this helps!
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I am trying to achieve this result, and have no clear idea how to do, but to resize element in javascript.
Are there any options to do so in SASS/CSS?
I found this npm package:
https://www.npmjs.com/package/sass-proportions.
But asking, in case anyone know any better/simple way?
This is easily achieved with only HTML and CSS
I attached a CodePen reference. View here
You will need 3 boxes
<div class="wrapper">
<div class="ratio-box">
<div class="content">I am a div that mantains its aspect ratio</div>
</div>
</div>
The wrapper box has a defined width, which is your element's width":
.wrapper {
width: 200px;
}
.ratio-box {
width: 100%;
padding-bottom: 50%;
position: relative;
}
.content {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
This works because the padding-bottom property is relative to the width property of its parent element.
Want a specific aspect ratio?
For a 2:1 aspect ratio, use padding-bottom: 50%;
For a 16:9 aspect ratio, use padding-bottom: 56.25%;
For a 9:16 smartphone aspect ratio, use padding-bottom: 177.78%;
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Im working with Lightbox2 plugin http://lokeshdhakar.com/projects/lightbox2/. I need:
always show nav arrows
arrows show on left and right side of browser, like float: left, right (not on image)
close button show on browser top right position
Please help me, how to do that options. Thank you
To always show the nav arrows, you will have to change their opacity to 1 (it is 0 by default).
Here:
.lb-nav a.lb-prev, .lb-nav a.lb-next {
opacity: 1;
}
Then to keep them on the side of the browser window you can change change the position property to fixed and then change the individual arrows accordingly, like this:
.lb-nav a.lb-next {
position: fixed;
right: 0;
top: 0;
}
.lb-nav a.lb-prev {
position: fixed;
left: 0;
top: 0;
}
and finally you can move the entire bottom block by messing around with the positioning like this:
.lb-dataContainer {
left: 50%;
position: absolute;
top: -45px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
Keep in mind, these solutions are far from perfect. This is a quick and dirty way to move elements around.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
If I don't use javascript to listen the event of resize. Is that any method to center the div?
The css structure contain 3 state. normal , under 900px, under 550px.
When the width is over 550px. I can set the section to center. When the screen is under 550px. I used scale to reduce the size and then I am unable to set it to center.
I tried change to position to fixed/relative, left/ float/transform-origin/translateX/use vw/margin/padding...
Is that I must use javascript to listen the window resize and then change the left property for the css of the section?
my website is on http://php-kkhchan.rhcloud.com
CSS:
#media screen and (max-width: 900px) {
.box {
width: 520px;
height: 650px;
}
#tabs {
width:520px ; height: 650px;
position: static;
margin: 0 auto;
padding-top: 1em;
}
}
#media screen and (max-width: 550px) {
#tabs, .box {
transform: scale(0.6,0.6);
left: -14%;
position: relative;
}
}
HTML:
<section id="tabs">
<article class="c_tab box" id="tab0" style="background: #A9D0F5;">
testing
</article>
</section>
You can also take reference to below jsfuddle
JSfuddle
finally, I used javascript to handle. the following is my solution.
I am not sure if it is the best solution.
$(window).resize(function(){
if ($(window).width()<=550) {
$('#tabs').trigger('customresize');
}
});
$('#tabs').on('customresize',function(){
myWidth=($(window).width() - 545)/2 +'px';
$(this).css('left',myWidth);
});
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
Look at this image:
I want to use a div to create a dialogbox that is near to the bottom right corner of the browser. The footer is fixed & its height is 50px & the dialogbox Div will lie right on top of the footer & to the bottom right corner of the browser as showed in the picture.
Note: the requirement is that that Div must be in that desired position relatively to the browser size. It means that when users shrink to extend the browser the div will be moved as well, but no matter how the div was moved, it should be always in that desired position as showed in the picture.
So, how can I do that in CSS?
If you want the element to stick regardless of scroll, use position: fixed:
{
position: fixed;
bottom: 50px;
right: 0;
}
You should use the css
#dialog{
position:fixed;
bottom:50px;
right:0px;
}
Hope this helps man,
<div style="position: absolute; right: 0; bottom: 0; width: 200px; height: 100px; border: 1px solid green;">
</div>
Eg:
Fiddle
<body>
<div stlye="position:relative; z-index:1;">
<div class="header"> header of website </div>
<div clss="main"></div>
<div clss="footer"> footer of website </div>
</div>
<div style="position:absolude;z-index:10000;right:0px;bottom:20px;"> dialog </div>
</body>
position:fixed positions elements relative to the browser's viewport:
.CLASS_OF_DIALOG_DIV {
position: fixed;
right: 0;
bottom: 50px;
}
However, if your footer does not also have position:fixed, then it won't have the right position relative to your dialog.
And if your footer does have position:fixed, then it will obscure any page content that reaches (or goes past) the bottom of the browser viewport.
Working demo: jsFiddle
You HTML could be
<div class="div1">
<div class="div2">
</div>
</div>
In CSS
.div1{
width: 100%;
height: 500px;
border: 1px solid black;
position: relative
}
.div2{
position: absolute;
right: 0;
bottom: 0;
width: 25%;
height: 100px;
border: 1px solid black;
}
Take a look at my website: http://homegym.sg/index.php/weight-tree-rack.html
If you mouseover the "more view" words under the product image, an additional images box will appear. Normally it's appearing normally in the center. However when i make my window size smaller, the position of the box will change.
I am using slideviewerpro script and i believe it is the one positioning the box but i am not able to tackle the problem. Here is the source of the script: http://homegym.sg/skin/frontend/default/electronics01-black/js/jquery.slideViewerPro.1.0.js
I believe the additional image box is in div#thumbSlider, have did some try and error modification of the js file but failed to solve the problem.
Ok. First of all, your div with width:660px; in product-img-box needs to have position:relative; added to it. Then you need to change the following rule
.product-view .product-img-box #ui0 {
position: absolute;
top: 600px;
left: 580px;
height: 60px;
}
to
.product-view .product-img-box #ui0 {
position: absolute;
height: 60px;
left: 50%;
margin-left: -200px;
margin-top: 15px;
}
widgets.css:589
And then just tweak from there. :)