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
var sidebar = document.getElementById('sidebar').offsetHeight;
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
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
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.