how to scale divs when i minimize browser so that divs dont collapse over each other
Tag : html , By : bdurbin
Date : March 29 2020, 07:55 AM
With these it helps i have small question. how is it possible to set the heights of 2 divs so that they dont collapse but rather scale dynamically if i minimize the window? i did this in js: , I think you need to bind to the resize event $(document).ready(function(){
var sidebar = document.getElementById('sidebar').offsetHeight;
$(window).resize(function(){
var footer = document.getElementById('footer').offsetHeight;
document.getElementById('sidebar').style.height = sidebar - footer + 'px';
});
});
|
I dont understand the logic behind working of media queries of foundation
Tag : css , By : user121501
Date : March 29 2020, 07:55 AM
I hope this helps . i think the problem maybe related to css specificity ( one command has higher priority) so what about trying to put @media only screen and (max-width: 40em) in the last of your commands and also inspect element in browser to know if this command is overwrited by other command this is the most things happen with me when works with bootstrap ,wish this help you
|
LESS:: css rules inside media queries dont append values on looping
Date : March 29 2020, 07:55 AM
will help you If you want to keep rulesets/properties in the same media block you need to keep the loop that generates them in that very same media block, e.g.: selector {
.multiple-bg("link1.jpg", "l1nk2.jpg", "link3.jpg", "l1nk4.jpg");
}
.multiple-bg(@list...) {
.-();
@media only screen
and (min-device-pixel-ratio: 2) {
.-("@2x");
}
.-(@suffix: "", @i: length(@list)) when (@i > 0) {
.-(@suffix, @i - 1);
@src: replace(extract(@list, @i), "\.", "@{suffix}.");
background-image+: url(@src);
}
}
|
Divs won't stay using media queries
Date : March 29 2020, 07:55 AM
I hope this helps you . You don't need media queries for that. Just put image and buttons in the same container, make the image stretch to container and then place buttons on their coords using position absolute and relative top/left. #NES {
display: flex;
position: relative;
}
img {
width: 100%
}
.btn {
background: blue;
position: absolute;
}
.aButton, .Bbutton {
height: 6%;
width: 4.3%;
}
.aButton {
left: 78%;
top: 56.7%;
}
.Bbutton {
left: 67.3%;
top: 56.5%;
}
.Start {
height: 2.75%;
width: 6%;
left: 40%;
top: 60%;
}
<div id="NES">
<img src="https://ih1.redbubble.net/image.278053540.7309/ap,550x550,16x12,1,transparent,t.png" alt="NES-Controller">
<div class="btn aButton"></div>
<div class="btn Bbutton"></div>
<div class="btn Start"></div>
</div>
|
Multiple Media Queries doesnt work. i dont understand
Date : March 29 2020, 07:55 AM
|
Boards Message :
Related QUESTIONS :