My approach involves using media queries to adjust the width and height of specific div elements when the window is resized. Additionally, I utilize jQuery to increase their size on mouseover. However, I have encountered an issue where the execution of jQuery disrupts the functionality of the media queries. Consequently, after resizing, the div elements retain the dimensions set by jQuery, and the styles from the media queries are not applied. Apologies for any confusion in my explanation due to language barriers.
css
@media only screen and (max-width:1100px)
{
.kruh
{
width: 150px;
height: 150px;
}
}
@media only screen and (max-width:850px)
{
.kruh
{
width: 100px;
height: 100px;
}
}
and jQuery
var s = $("#kruh1").width();
var d=s+10;
$("#kruh1").mouseover(function()
{
$("#kruh1").animate({width: d+"", height: d+""}, );
});
$("#kruh1").mouseout(function()
{
$("#kruh1").animate({width: s+"", height: s+""}, );
});