Currently, I am facing an issue with two elements on my page: .start_over_button and .speed_buttons. In CSS, the .start_over_button is set to display: none, and in my JavaScript code, I have it so that when .speed_buttons are clicked, they fade out and the .start_over_button fades in. The problem arises because I am using Bootstrap for positioning my page elements, and due to the differing heights of .start_over_button and .speed_buttons, the page jumps around when the JavaScript function runs, which is quite annoying. I want to ensure that both elements have the same height regardless of the viewport size to prevent this behavior. However, every attempt to set the heights equal in my stylesheet has either had no effect or has not worked as intended. Below is the structure of the div:
<div class="row thirdRow">
<a class="start_over_button" href="index.html">
<button type="button" class="btn btn-default btn-lg col-xs-10 col-xs-offset-1 col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4">
<span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>
Start Over
</button>
</a>
<div class="speed_buttons">
<label id="slowText" class="radio-inline col-xs-2 col-xs-offset-3">
<input id="slow" class="difficulty" type="radio" name="user_options" value="300">
Slow
<span class="glyphicon glyphicon-cloud" aria-hidden="true"></span>
</label>
<label id="medText" class="radio-inline col-xs-2">
<input id="med" class="difficulty" type="radio" name="user_options" value="150">
Med
<span class="glyphicon glyphicon-fire" aria-hidden="true"></span>
</label>
<label id="fastText" class="radio-inline col-xs-2">
<input id="fast" class="difficulty" type="radio" name="user_options" value="75">
Fast
<span class="glyphicon glyphicon-flash" aria-hidden="true"></span>
</label>
</div>
</div>
Below is the CSS code snippet:
.start_over_button{
display: none;
}
The JavaScript code:
$(".speed_buttons").fadeOut(0, function(){
$(".start_over_button").fadeIn(0);
});
I am relatively new to coding and have been searching for a solution to this issue for the past couple of days on platforms like W3Schools, Stack Overflow, and API jQuery. Any help or guidance you could provide would be greatly appreciated! Thank you in advance.