We are facing an issue with the sticky cookie notification on a website. While it appears correctly on most browsers, the default Samsung browser named "Internet" is causing the text element to be narrower than intended. This results in an unsightly line break, misaligned dismiss button, and unnecessary extra height for the sticky element.
https://i.sstatic.net/zkzg1.jpg
I am unsure where to begin addressing this problem, especially since it seems to be isolated to Samsung's mobile browsers, and I am unable to use any CSS/DOM inspection tools on them. Any suggestions?
Fiddle: https://jsfiddle.net/1m94d99o/4/
body, html {
width: 100%;
height: 100%;
font-family: sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: auto;
box-sizing: border-box;
}
*, *::after, *::before {
box-sizing: inherit;
}
.bottom-notifications {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
}
.bottom-notification {
width: 100%;
background-color: darkblue;
color: #fff;
position: relative;
max-height: 200px;
-webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
-webkit-transition: -webkit-transform 0.3s ease-in, max-height 0.5s linear 0.3s;
transition: transform 0.3s ease-in, max-height 0.5s linear 0.3s;
font-size: 12px;
}
.bottom-notification__content {
max-width: 800px;
width: 100%;
overflow: hidden;
margin: 0 auto;
text-align: left;
height: 100%;
}
.bottom-notification__text {
padding: 15px 77px 15px 15px;
display: block;
width: 100%;
}
.bottom-notification p {
margin: 0;
display: inline;
}
.bottom-notification a {
color: #fff;
font-weight: bold;
text-decoration: underline;
display: inline;
white-space: nowrap;
width: auto;
clear: none;
}
.button, .bottom-notification__dismiss, .search-box-container .search, .wideunit__button a {
border: none;
border-width: 2px 0;
border-style: solid;
border-radius: 3px;
font-size: 14px;
font-weight: 700;
padding: 16px;
-webkit-transition: background-color 0.1s ease-in, border-color 0.1s ease-in;
transition: background-color 0.1s ease-in, border-color 0.1s ease-in;
box-sizing: border-box;
display: inline-block;
margin-top: 1em;
width: 100%;
}
.bottom-notification__dismiss {
display: block;
background-color: blue;
border-radius: 0px;
height: 100%;
border: 0;
position: absolute;
margin-top: 0;
width: 77px;
right: 0;
top: 0;
z-index: 101;
outline: 0;
font-size: 12px;
}
@media screen and (min-width: 768px) {
.bottom-notification__content {
text-align: center;
display: block;
}
.bottom-notification__text {
display: inline-block;
width: auto;
margin-right: 0px;
}
.bottom-notification a {
padding-left: 15px;
}
.bottom-notification__dismiss {
position: relative;
width: 45px;
height: auto;
padding: 0.5em;
top: auto;
right: auto;
display: inline-block;
}
}<div class="bottom-notifications">
<div class="bottom-notification bottom-notification--any" id="notification-5d93762f1abe41aaa78ab86cb59cba7c">
<div class="bottom-notification__content">
<span class="bottom-notification__text"><p>By using this site you accept the use of cookies. <a href="http://www.cookielaw.org/the-cookie-law/" target="_blank">Read more</a></p>
</span>
<button class="bottom-notification__dismiss" data-notificationid="5d93762f1abe41aaa78ab86cb59cba7c" data-cookiename="bulletinalert-14cd5c89c251a9cd882313850af757a10100d620">OK</button>
</div>
</div>
</div>