After some trial and error, I managed to get it working, but only when the page is initially loaded and not in a responsive manner. Below is the JavaScript code I used.
if ( $(".alert-box").height() >= 90 ) {
$('.img').css('padding', '30px 20px 0 20px');
}
else {
$('.img').css('padding', '20px 20px 0 20px');
}
Is there a way to make this work even when the page is resized?
I'm facing an issue with aligning an icon in an alert box. When the alert has one line of text, the icon should be centered with that single line. However, when the text wraps into two lines due to responsive resizing, the icon should be aligned at the center of both lines. I thought about using @media queries to adjust padding based on screen width, but since the text length varies dynamically, it's challenging to pinpoint the exact breaking point. Is there a solution to achieve this without complex CSS or JavaScript coding?
Thank you for your support!
You can view three images illustrating my problem on this HTML page: Images
Here's a snippet of the CSS code I'm currently using:
.alert-box {
margin-top: 30px;
border-radius: 5px;
padding: 0;
border-style: solid;
border-width: 1px;
display: block;
font-size: 0.8125rem;
font-weight: normal;
position: relative;
transition: opacity 300ms ease-out;
background-color: #008CBA;
border-color: #0078a0;
color: #FFFFFF;
}
.alert-box .text {
padding-left:20px;
font-size:14px;
display:inline;
}
.alert-box p {
margin-bottom: 0;
padding-right: 30px;
padding-left: 67px;
}
.alert-box .img {
padding: 20px 20px 0 20px;
float:left;
position: absolute;
}