Help with banner display on top of page

Solved
New Member
2 0 0

Hi Everyone,

I need some help with getting a banner on the top of my site Ironvapin.com to display as I need it. The FDA requires that I have a nicotine warning bar on the top of every page, and it needs to be at least 20% of the screen and the text must be centered vertically and horizontally.

On mobile view, it's perfect, I don't want to change a thing. However, on desktop view, I need it to be a bit larger, with a larger font, and with the text centered vertically and was hoping I could get some help here.

 


In my theme file I have the following code:

<span id="SPAN_1">WARNING: This product contains nicotine. Nicotine is an addictive chemical.</span><br>

 

 

And I have the CSS as follows:

#SPAN_1 {
box-sizing: border-box;
display: block;
height: 90px;
padding-bottom: 100px;

letter-spacing: 1px;
text-align: center;
text-size-adjust: 100%;
width: 100%;
perspective-origin: 182px 46.5px;
transform: matrix(1, 0, 0, 1, 0, 4);
transform-origin: 182px 46.5px;
background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
border: 4px solid rgb(0, 0, 0);
font: normal normal 700 normal 22px / 31.4285px helvetica;
transition: background 0.1s ease-out 0s;

}/*#SPAN_1*/

#SPAN_1:after {
box-sizing: border-box;
letter-spacing: 1px;
text-align: center;
text-size-adjust: 100%;
font: normal normal 700 normal 22px / 31.4285px helvetica;
}/*#SPAN_1:after*/

#SPAN_1:before {
box-sizing: border-box;
letter-spacing: 1px;
text-align: center;
text-size-adjust: 100%;
font: normal normal 700 normal 22px / 31.4285px helvetica;
}/*#SPAN_1:before*/

 

 

What would I need to change or correct to make these changes exclusively to the desktop view?
Any help is appreciated. 

0 Likes

Success.

Tourist
10 2 2

Sent you a message via your FB. Sent you a pastebin of the code I use.

2 Likes
New Member
2 0 0

Fantastic. THANK YOU!

0 Likes
New Member
2 0 0

Hey, would it possible of sending me this aswell?

0 Likes
Tourist
10 2 2

Link your site

0 Likes
New Member
2 0 0

MonstaBreath.com

0 Likes