Reputation: 4765
When I look at Chrome Dev Tools, it says one of my div's has an element style:
element.style {
height: 300px;
opacity: 1;
}
To me, this means that some javascript, or jquery is causing this. But how do I find what is making this change to it if I'm correct assuming that it's a script that causes that.
For more detail, if you go to zhang-jason.com (my portfolio), right click on one of the large div's (article or projects), you'll see the above style to <div class="bottom-section hide-me-until-december vegas-container">
.
I copied the HTML it's affecting when I click on it:
<div class="bottom-section hide-me-until-december vegas-container" id="articles" style="height: 300px; opacity: 1;">
<div class="vegas-slide vegas-transition-fade vegas-transition-fade-in vegas-transition-fade-out" style="transition: all 4000ms;">
<div class="vegas-slide-inner vegas-animation-kenburnsUpLeft" style="animation-duration: 20000ms; background-image: url("img/bottom/4.jpg"); background-color: rgb(128, 128, 128); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="vegas-slide vegas-transition-fade vegas-transition-fade-in vegas-transition-fade-out" style="transition: all 4000ms;">
<div class="vegas-slide-inner vegas-animation-kenburnsRight" style="animation-duration: 20000ms; background-image: url("img/bottom/5.png"); background-color: rgb(128, 128, 128); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="vegas-slide vegas-transition-fade vegas-transition-fade-in vegas-transition-fade-out" style="transition: all 4000ms;">
<div class="vegas-slide-inner vegas-animation-kenburnsDownLeft" style="animation-duration: 20000ms; background-image: url("img/bottom/6.jpg"); background-color: rgb(128, 128, 128); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="vegas-slide vegas-transition-fade vegas-transition-fade-in vegas-transition-fade-out" style="transition: all 4000ms;">
<div class="vegas-slide-inner vegas-animation-kenburns" style="animation-duration: 20000ms; background-image: url("img/bottom/6.png"); background-color: rgb(128, 128, 128); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="vegas-slide vegas-transition-fade vegas-transition-fade-in" style="transition: all 4000ms;">
<div class="vegas-slide-inner vegas-animation-kenburnsRight" style="animation-duration: 20000ms; background-image: url("img/bottom/ramen.jpg"); background-color: rgb(128, 128, 128); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="vegas-overlay"></div>
<div class="vegas-wrapper" style="overflow: hidden; padding: 0px;">
<div class="bottom-wrap">
<h2>Articles</h2>
<div class="line">__</div>
</div>
</div>
</div>
Upvotes: 0
Views: 101
Reputation: 526
To know which function is resizing element in chrome you have to right click on the element and choose Break on > Attribute modified, it's will break you when the css is modified, then you can look on sources tab to detect the function
Upvotes: 2
Reputation: 1973
So you are using the vegas slideshow plugin, and I would imagine that it's applying a size to the div due to it having the class 'vegas-container'. Try either placing your div inside the vegas-container div, or the vegas container div inside your div. Otherwise the plugin will keep resizing it.
Upvotes: 0