Help with banner display on top of page

Solved
Highlighted
New Member
2 0 1

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. 

1 Like
Highlighted
Excursionist
19 3 6

This is an accepted solution.

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

5 Likes
Highlighted
New Member
2 0 1

Fantastic. THANK YOU!

0 Likes
New Member
3 0 0

Hey, would it possible of sending me this aswell?

0 Likes
Highlighted
Excursionist
19 3 6

Link your site

0 Likes
Highlighted
New Member
3 0 0

MonstaBreath.com

0 Likes
Highlighted
New Member
1 0 0

Can you please send me he link as well?

0 Likes
Highlighted
New Member
2 0 0

Could you send me a link also please? it@teamstrength.us

0 Likes
Highlighted
New Member
1 0 0

Hello MysticMerchant,

Would you be able to help me out as well. I am having a hard time figuring this out. 

How to get the banner on the site, and where to insert in?

 

 

0 Likes