Mobile Optimisation

[Rama Devi]

Hello Bill,

1) You gave me the below code earlier to Blur the Website in portrait & to display a message in a Box. However, I dont want the entire Box to display Colour. I just want the Border of the Box to Display colour. The main background of the Box should be Transparent along with a Message in it. I should be able to set the Size, Colour How should I set this?

2) How can I change the Navigation Bar colour in Mobile View? Is it set to black by default? I want the Mobile Navigation Bar to be Transparent

Code: 1

@media only screen and (max-width: 519px) {

body {
-webkit-filter: blur(10px);
filter: blur(10px);
}

html {
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

html:after {
position: absolute;
top: 40%;
padding: 5%;
color: #fff;
width: 45%;
left: 20%;
text-align: center;
background-color: rgba(0, 0, 0, 0.64);
font-family: Open Sans, sans-serif;
font-size: 16px;
content: ‘Please rotate your device’;
}

}

Thanks

[Bill Robbins]

Change this:

html:after {
position: absolute;
top: 40%;
padding: 5%;
color: #fff;
width: 45%;
left: 20%;
text-align: center;
background-color: rgba(0, 0, 0, 0.64);
font-family: Open Sans, sans-serif;
font-size: 16px;
content: ‘Please rotate your device';
}

to be like this:

html:after {
position: absolute;
top: 40%;
padding: 5%;
color: #fff;
width: 45%;
left: 20%;
text-align: center;
border: 2px solid #fff;
font-family: Open Sans, sans-serif;
font-size: 16px;
content: ‘Please rotate your device';
}

That will give a 2px solid white border around the box and no background color. Since it’s not possible for us to know the size of the viewer’s screen, stick with percentage sizes.

---

You can take out the background of the mobile navigation with this:

.slicknav_nav,
.slicknav_btn { 
	background: transparent;
}

[Author]

Posts