How do I make rotating bars the same height when one has a button?(QAB)

If you are rotating multiple Quick Announcement Bars and some have a button while others don't, you may notice that the bars are slightly different heights. To solve this, you can add this code into the custom code box in each bar that rotates:

<style>
@media only screen and (min-width: 801px) {
#qab_bar{
height: 56px !important;
}
#qab_content{
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
}
}

@media only screen and (max-width: 800px) {
#qab_bar{
height: 40px !important;
}
#qab_content{
margin: 0;
position: relative;

top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
}
</style>

Like so:

Alternatively, rather than placing the code into each bar, you can place the code into your theme.liquid file in the head section, or in your CSS file, just without the <style> tags. The code can be added anywhere in the CSS file. The very bottom is fine.

You can adjust the height attribute in the code to accommodate the tallest bar. 56px mean 56 pixels tall. That can be set to, for example, 60px. Experiment until you find a size that works for you. If one of your bars has a much longer message than others, it may need two lines to display the whole message.