How to change the hover text-color of the menu/navbar into white when it is being viewed on mobile. I've tried looking into the css code of the bootstrap but i can't find it.
You can write media query to cater specific hover state for the li element like :
Jsfiddle Demo
#media (max-width: 767px) {
.navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {
background-color: #888;/* change this color*/
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125) inset;
color: #555555;
text-decoration: none;
}
}
#media (max-width: 767px) {
.nav-collapse .nav > li > a:hover, .nav-collapse .nav > li > a:focus, .nav-collapse .dropdown-menu a:hover, .nav-collapse .dropdown-menu a:focus {
background-color: #000;/*you can change this color to anything*/
}
}
#media (max-width: 480px) {
.nav-collapse .nav > li > a:hover, .nav-collapse .nav > li > a:focus, .nav-collapse .dropdown-menu a:hover, .nav-collapse .dropdown-menu a:focus {
background-color: #000;/* you can change this color to anything */
}
}
Related
Below is the code that I'm using to build a page on my website. I'd like the video that I have set to display in the background across the entire screen. I've been able to achieve this on a PC, portrait on a mobile device (I'm currently using an iPhone 12 pro), and on landscape on a mobile device.
However, I'm noticing two issues at the moment. The first issue is that on a mobile device I'm able to scale the video to any size that I'd like. The second issue is that when placing my mobile device in landscape and refreshing the pages a few times the video scales down and doesn't display across the entire screen.
How can I set the video so that no matter what device someone is using it can't be rescaled? And how can I have the video be played full across any screen of any device? The answer to the solution seems to lie within the meta tag, no matter what I do with the CSS it doesn't change the size of the video to fit a mobile device.
<!DOCTYPE html>
<html>
<meta name="viewport" content="viewport-fit=cover, user-scalable=no" charset="utf-8">
<body>
<title>MORIKOBOSHI - 公式ウェブサイト・Official Website</title>
<div class="video-container">
<video src="Home_Page.mp4" autoplay loop muted playsinline style="z-index: 100px; overflow: hidden; object-fit: cover;"></video></div>
<div class="relative">
<p style="text-align: left; font-family: sans-serif; overflow: hidden; color: transparent; opacity: .45;">
</div>
<div class="absolute">
<p style="text-align: left; font-family: sans-serif; overflow: hidden; color: transparent; opacity: .8;">
</div>
<div class="home_page">
<p style="text-align: center; font-size: 40px; font-family: sans-serif; overflow: hidden;"><b>日本語</b> | <b>English</b></p></div>
<style>
.relative {
font-size: 25px;
}
.absolute {
font-size: 13px;
}
#media (max-width: 1130px) and (min-width: 280px) {
.relative {
font-size: 11px;
}
}
#media (max-width: 1130px) and (min-width: 280px) {
.absolute {
font-size: 6px;
}
}
video {
object-fit: fill;
}
.video-container {
position: fixed;
text-align: center;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.video-container video {
/* Make video to at least 100% wide and tall */
/* Setting width & height to auto prevents the browser from stretching or squishing the video */
width: 100%;
height: 100%;
/* Center the video */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#media (max-width: 1130px) and (min-width: 280px) and (orientation: landscape) {
.video {
width: 100vh;
}
}
.relative {
position: absolute;
top: -10px;
left: -13px;
}
#media (max-width: 1130px) and (min-width: 280px) {
.relative {
position: absolute;
top: -15px;
left: -30px;
}
}
.absolute {
position: absolute;
left: 28px;
top: 28px;
}
#media (max-width: 1130px) and (min-width: 280px) {
.absolute {
position: absolute;
top: 4px;
left: -15px;
}
}
video {
position: fixed;
text-align: center;
object-fit: cover;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
object-fit: cover !important;
-webkit-object-fit: cover !important;
-moz-object-fit: cover !important;
-o-object-fit: cover !important;
}
p {
color: white;
text-decoration: none;
color: white;
text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000,
-1px -1px 0 #000;
font-size: 400%;
margin: 50px;
position: relative;
z-index: 3;
}
.home_page {
position: fixed;
top: 520px;
left: 410px;
}
#media (max-width: 1130px) and (min-width: 280px) {
.home_page {display: none;
}
}
#media (max-width: 1130px) and (min-width: 280px) and (orientation: landscape) {
.home_page {display: none;
}
}
</style>
</body>
</html>
I develop in Django framework. In IOS, Safari I have a bug with input cursor in markup like in this screenshot (cursor is outside input control when I type text in control):
. Other browsers look good - no bug. I have a following html code in my project:
<form id="loginForm" name="authorization">
{% verbatim %}
<div class="error-message" ng-if="wrongUserPass" id="authErrorPath">{{ loginErrorMess }}</div>
{% endverbatim %}
<div class="form-group form-field-group_inline" ng-if="!user_is_authenticated && auth_step1">
<input class="form-field signinPhone with_ccode" id="id_phone" ng-model="loginForm.loginPhone" bad-gentlemen-mask="+7 (***) ***-**-**" autocomplete="off" name="phone" placeholder="телефон" type="text" my-enter="" value='' {% if mobile == True %} scroll-on-focus {% endif %} />
</div>
</form>
Cursor appears like here, but I don't understnand how to fix this issue.
Following css code (from chrome developer tools) corresponds input control with id=id_phone:
.form-field:focus, .form-field:hover {
box-shadow: 0 6px 10px rgba(0,0,0,.1);
}
#media (max-width: 767px) {
.login__mobile .form-field {
width: 260px!important;
margin: 0 auto;
}
}
#media (max-width: 767px) {
.login__mobile .form-field {
padding: 6px 10px!important;
}
.login__mobile .form-field {
padding: 0 12px!important;
border-radius: 6px;
}
}
#media (max-width: 767px) {
.form-field {
font-size: 1.5rem;
}
.form-field {
border: 3px solid #dfecf5;
border-radius: 10px;
font-size: 2.083333333333333rem;
font-weight: 300;
padding: 5px 12px;
width: 100%;
outline: 0;
-webkit-transition: all .3s ease;
transition: all .3s ease;
background-color: #fff;
color: #31323a;
}
.form-field, .form-label_block {
display: block;
}
}
button, input, select, textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
input {
line-height: normal;
}
button, input, optgroup, select, textarea {
margin: 0;
font: inherit;
color: inherit;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
input:not([type]), input[type="email" i], input[type="number" i], input[type="password" i], input[type="tel" i], input[type="url" i], input[type="text" i] {
padding: 1px 0px;
}
input {
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
cursor: text;
padding: 1px;
border-width: 2px;
border-style: inset;
border-color: initial;
border-image: initial;
}
input, textarea, select, button {
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
margin: 0em;
font: 400 13.3333px Arial;
}
input, textarea, select, button, meter, progress {
-webkit-writing-mode: horizontal-tb;
}
.login__mobile {
color: #fff;
display: none;
padding: 0;
}
.navbar_menu-show .top-menu_mobile {
visibility: visible;
opacity: 1;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.top-menu_mobile {
display: none;
visibility: hidden;
opacity: 0;
position: fixed;
top: 0;
right: 0;
height: 100%;
width: 100%;
padding: 5px 15px;
z-index: 1000;
background-color: rgba(0,0,0,.9);
-webkit-transition: all.3s ease;
-o-transition: all.3s ease;
transition: all .3s ease;
text-align: center;
overflow: scroll;
}
body, html {
font: 400 12px 'Open Sans',sans-serif;
line-height: 1.333333333333333;
color: #1e252b;
overflow-x: hidden;
}
body, html {
font: 400 12px 'Open Sans',sans-serif;
line-height: 1.333333333333333;
color: #1e252b;
overflow-x: hidden;
}
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
:after, :before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:after, :before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Please, help, who knows. Thanks.
Privet Alexander, I had the same problem. This is an iOS bug that occurs if your <input> field is in a container (div etc) with the css property position: fixed. I had my <body> tag css'ed with position: fixed and had to change it to something else, i.e. to position: absolute.
Some other workarounds are described here:
https://hackernoon.com/how-to-fix-the-ios-11-input-element-in-fixed-modals-bug-aaf66c7ba3f8
view it on jfiddle. (you may need to add the frameworks: jquery 1.11.0, then tick the box for jquery mobile 1.4.4. I tried adding the resources for the versions I use (1.11.1 and 1.4.5 respectively -- but the pages don't render from their link. Sorry 'bout that.)
When I add data-position='fixed' to my footer on a page that has, a reduced width on larger screens (set with a media query in css) and a nav-panel that says open on larger screens using the data-display="reveal" or "push" (no problem with "overlay"), when I open the nav-panel (icon in upper left of header) the footer slides right as it should, but does not resize, and the contents are not centered. The re-sizing toggles if I click on the background, but the content never centers. I've settled on "overlay" as a temporary fix, but I'd prefer to use "reveal" (the default). Much of the CSS for the nav-panel is borrowed from the jquery mobile demos.
To duplicate the problem on the fiddle, use a wide screen and enlarge the output panel so that you see the gradient background, then click on the menu button (bars). After that you can see the footer slide (but not adjust its width) and slide back to an adjusted width (but not center the icons in the footer).
Any ideas what I did wrong or what CSS might resolve the issue?
Here's the html:
<body>
<div data-role="page" id="index-page" class="ui-responsive-panel" data-title="MMT" data-url="index-page" data-theme="a">
<div data-role="header" >
<h6 class='header' style="overflow:visible !important;">Test Page</h6>
Contact
</div><!-- /header -->
<div data-role="panel" class="jqm-navmenu-panel" data-position-fixed="true" data-display="reveal" id="index_nav-panel">
<ul data-role="listview">
<li>Close Menu</li>
<li>Blah</li>
<li>Foo</li>
<li>Bar</li>
<li>Bat</li>
</ul>
</div>
<div role="main" class="ui-content"><div class="banner">Banner Image </div>
<p>text</p>
<div style='margin-top:44px;'>
<ul data-role="listview">
<li>Foo</li>
<li>Bar</li>
<li>Bat</li>
<li>Baz</li>
<li>Biz </li>
</ul>
</div>
<div data-role='collapsible' class='ui-nodisc-icon' data-collapsed-icon="home" data-expanded-icon="carat-u" data-mini='true'>
<h3>Follow...</h3>
<p>Follow us on Twitter:</p>
</div>
</div>
<div data-role='footer' data-position='fixed'>
<div class='footer'>
Contact Phone:
Twitter
</div>
</div><!-- /footer -->
here's the css
/*css file for mobile website*/
#media all and (max-width: 50em) {
.my-breakpoint .ui-block-a,
.my-breakpoint .ui-block-b,
.my-breakpoint .ui-block-c,
.my-breakpoint .ui-block-d,
.my-breakpoint .ui-block-e {
width: 100%;
float:none;
}
}
.banner img{
display:block;
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto
}
/* set a width for wide screens */
.collapsible {
max-width:900px;
}
/* to center the content on wide screen pc or laptop */
#media only screen and (min-width: 1025px){
.ui-page{
width: 960px !important;
margin: 0 auto !important;
position: relative !important;
/*border-right: 3px rgb(93, 105, 105) outset !important;
border-left: 3px rgb(93, 105, 105) outset !important;*/
}
.ui-footer {
max-width: 960px !important;
margin: 0 auto !important;
}
}
.header, .firm {font-family: 'IM Fell French Canon SC', serif !important;}
.firm{font-size:1.2em; font-weight:bold;}
.ui-header .ui-title {
margin-right: 10%;
margin-left: 10%;
}
/*panel background color*/
div#index_nav-panel{
background-color: rgba(91, 95, 97, 0.1) !important;
}
/*panel stays open on desktops*/
#media (min-width:35em) {
/* wrap on wide viewports once open */
.ui-panel-page-content-open.ui-panel-page-content-position-left {
margin-right: 17em;
}
.ui-panel-page-content-open.ui-panel-page-content-position-right {
margin-left: 17em;
}
.ui-panel-page-content-open {
width: auto;
}
/* disable "dismiss" on wide viewports */
.ui-panel-dismiss {
display: none;
}
/* same as the above but for panels with display mode "push" only */
.ui-panel-page-content-open.ui-panel-page-content-position-left.ui-panel- page-content-display-push {
margin-right: 17em;
}
.ui-panel-page-content-open.ui-panel-page-content-position-right.ui-panel- page-content-display-push {
margin-left: 17em;
}
.ui-panel-page-content-open.ui-panel-page-content-display-push {
width: auto;
}
.ui-panel-dismiss-display-push {
display: none;
}
div.footer {
text-align: center;
letter-spacing: .2em;
font-size: 1em;
}
}
/* #### target mobile devices with max device width 480px #### */
#media screen and (max-device-width: 480px){
div.footer {
font-size: .75em;
}
div.footer a.ui-btn {
margin-top: 0.1em !important;
}
}
div.footer {
text-align: center;
/* font-size: .75em;
*/}
.footer-text{
color: #999;
margin-left:-8px;
}
/*popup dialog background color*/
div#popupSocialMedia, div#popupDialog {
background-color: rgb(237,237,237);
}
div#popupDialog .ui-content {
height: 50%;
}
div.ui-content { background-color: #f9f9f9 !important;}
.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a {
background-color: rgb(10, 10, 10) !important;
background: #d2b48c; /* old browsers */
background: -webkit-linear-gradient(#efefef,#000000) fixed; /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(#efefef,#000000) fixed; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#media (min-width: 60em) {
.jqm-demos .jqm-header h2 {
padding: 1em 0 .7em;
margin: 0 1em 0 3%;
text-align: left;
}
.jqm-demos .jqm-header h2 img {
width: 275px;
height: 78px;
}
.jqm-demos .jqm-header p {
bottom: auto;
left: auto;
top: 50%;
right: 15%;
font-size: 1.2em;
margin-top: -.625em;
}
.jqm-demos .jqm-navmenu-link {
display: none;
}
.jqm-demos .jqm-search-link {
right: 3%;
}
.jqm-demos .jqm-footer p {
float: right;
margin: 1.5em 3% 1.5em 1.5em;
}
.jqm-demos .jqm-footer p:first-child {
float: left;
margin: 1.25em 1.25em 1.25em 3%;
}
.jqm-demos .jqm-navmenu-panel {
visibility: visible;
position: relative;
left: 0;
clip: initial;
float: left;
width: 25%;
background: none;
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
transform: none !important;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.jqm-navmenu-panel .ui-panel-inner {
margin-top: 3em;
margin-bottom: 3em;
}
.jqm-navmenu-panel .ui-listview .ui-btn {
padding-left: 12.5%;
text-shadow: none !important;
}
.jqm-navmenu-panel .ui-listview .ui-listview .ui-btn {
padding-left: 15%;
}
.jqm-navmenu-panel .ui-collapsible,
.jqm-navmenu-panel .ui-collapsible-content,
.jqm-navmenu-panel .ui-btn {
background: none !important;
border-color: #ddd !important;
}
.jqm-navmenu-panel .ui-btn.ui-btn-active {
color: #3388cc !important;
}
.jqm-navmenu-panel .ui-btn::after {
opacity: 0;
-webkit-transition: opacity 500ms ease;
-moz-transition: opacity 500ms ease;
transition: opacity 500ms ease;
}
.jqm-navmenu-panel .ui-btn:hover::after {
opacity: .6;
}
.ui-panel-dismiss-open.ui-panel-dismiss-position-right {
left: -17em;
right: 17em;
}
}
I've omitted the javascript... from here and the fiddle.
Thanks for looking at this...
screenshot of the footer extended
...screen shot of the footer retracted after clicking on the background
The problem goes away if I remove "data-position="fixed" from the footer.
Posting my own answer at #twisty's suggestion. See his comments, too.
It turns out that since I found a different stackoverflow solution to keep my pages full size, my display is the same without data-position="fixed"... so I just removed it and all works as it "should". I'm curious to know why the footer doesn't work the same as the header, but don't want to spin anyone's wheels since I can now move forward without the issue
In case anyone wants to know where my 'fix' was, it's thanks to #ezanker, whose jfiddle shows the code: jsfiddle.net/zKS76/19 and Omar, whose answer to the op's question on so is stackoverflow.com/questions/21552308/…;.
#twisty suggests the reason that headers and footers behave differently: " When it is "fixed" it's removed from that wrapper and has a z-index of 1000, and is sort of stand alone from the rest of the page. "
I have just built my first responsive website but there is one issue I am facing, the CSS dropdown menus work on android and Chrome's emulation but not in safari on iPhones or iPads. Here is a link to a working copy and here is the code:
HTML
<nav role="navigation" id="top-nav" class="floatRight">
<div class="nav top-nav cf">
<ul>
<li class="page_item page-item-25 current_page_item">Home</li>
<li class="page_item page-item-35">Contact Us Now</li>
<li class="page_item page-item-37">Services</li>
<li class="page_item page-item-41">Gallery</li>
</ul>
</div>
</nav>
CSS
#top-nav {
margin-top: 60px;
z-index:200;
}
#top-nav li {
float: left;
background-image: none;
padding-left: 0;
}
#top-nav li a {
font-size: 14px;
padding: 8px 12px;
color: #797f94;
display: block;
}
#top-nav li:hover {
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #2AA6FF),
color-stop(1, #1E8AD7)
);
background-image: -o-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
background-image: -moz-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
background-image: -webkit-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
background-image: -ms-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
background-image: linear-gradient(to bottom, #2AA6FF 0%, #1E8AD7 100%);
border-radius: 5px;
}
#top-nav li:hover a {
color: #ffffff;
text-decoration: none;
}
/* ==========================================================================
Tablet changes
========================================================================== */
#media screen and (min-width: 640px) and (max-width: 1024px) {
#top-nav {
width: 70px;
border-radius: 3px;
position: absolute;
right: 20px;
z-index: 300;
}
#top-nav::before {
content: "Menu";
}
#top-nav ul {
width: 100%;
}
#top-nav::before:hover div, #top-nav::before:focus div, #top-nav:hover div, #top-nav:focus div {
z-index: 400;
display: block;
}
#top-nav li {
background-image: none;
position: relative;
}
#top-nav li:hover {
background-image: none;
}
}
/* ==========================================================================
Tablet & mobile changes
========================================================================== */
#media screen and (max-width: 1024px) {
#top-nav {
padding: 8px 12px;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #2AA6FF),
color-stop(1, #1E8AD7)
);
background-image: -o-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
background-image: -moz-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
background-image: -webkit-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
background-image: -ms-linear-gradient(bottom, #2AA6FF 0%, #1E8AD7 100%);
background-image: linear-gradient(to bottom, #2AA6FF 0%, #1E8AD7 100%);
}
#top-nav li a {
color: #ffffff;
}
#top-nav::before {
color: #ffffff;
background-image: url(../images/menu.gif);
background-position: 0% 3px;
background-repeat: no-repeat;
padding-left: 29px;
}
#top-nav li:hover a {
color: #ffffff;
text-decoration: underline;
}
#top-nav div {
display: none;
}
#top-nav:hover div {
/*position: absolute;*/
}
#top-nav:hover {
height: 210px;
}
}
/* ==========================================================================
Mobile changes
========================================================================== */
#media screen and (max-width: 639px) {
#top-nav {
margin-top: 0;
overflow: hidden;
float: none;
}
#top-nav::before {
content: "J Gibson Electrical";
font-family: segoe-script, "Comic Sans MS", cursive, sans-serif;
font-weight: bold;
}
#top-nav ul {
width: 100%;
}
#top-nav li {
clear: left;
}
#top-nav:hover div {
display: block;
}
#top-nav li:hover, #top-nav li:focus {
background-image: none;
}
}
Solution
As the accepted answer says, JavaScript was the solution. Here was my solution:
//This goes in an onload or onresize event
if(viewportWidth <= 1024)
$("#top-nav").click( function() {
toggleMenu();
});
}
function toggleMenu()
{
menuItems = $("#top-nav div");
if(menuItems.css("display") == "none")
{
menuItems.css({
"display": "block"
});
}
else
{
menuItems.css({
"display": "none"
});
$("#top-nav").css({
"height": "auto"
});
}
}
The issue is with the fact that you can't "hover" on an iPad, you have to use js onclick events and styling to make them drop down on click. Here are some links that might help https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent http://www.w3schools.com/jsref/prop_style_width.asp
I was having the same issue and I decided to use a slide menu http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/
hover states don't work on touch enabled devices. You'll have to use touch events in js or just a regular click event.
Hello Phill you need to use other pseudo selector
Check the following stackoverflow post :touch CSS pseudo-class or something similar?
Seb
Found a different issue related to this topic that I thought I would post for future reference.
ISSUE > Dropdown's work in all browsers except Safari Mobile.
Tracked the issue to the A tag not having a href element. This appears to only be an issue on Safari mobile. Without the href tag the element is not treated as a clickable element.
Cheers!
I have some scss that I'm trying to use for an app. It works fine on my laptop's Firefox/Chrome/Safari browsers but blanks the page on an iPad's Safari/Chrome. I think it's related to the transform properties? Here's my code:
ol {
counter-reset: li; /* Initiate a counter */
list-style: none; /* Remove default numbering */
*list-style: decimal; /* Keep using default numbering for IE6/7 */
font-size: 15px;
padding: 0;
margin-bottom: 4em;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
ol {
margin: 0 0 0 2em; /* Add some left margin for inner lists */
}
}
.rounded-list{
a{
position: relative;
display: block;
padding: .7em .7em .7em 2em;
*padding: .4em;
margin: .5em 0;
background: $light-gray-1;
color: #444;
text-decoration: none;
border-radius: .3em;
/*transition: all .2s ease-out; Uncomment here to add fade-in/out effect*/
&:hover {
background: $light-gray-2;
}
&:hover:before {
transform: scaleX(-1);
-webkit-transform: scaleX(-1); /* Chrome, Safari, Opera */
-ms-transform: scaleX(-1); /* IE 9 */
}
&:before {
content: counter(li);
counter-increment: li;
position: absolute;
left: -1.3em;
top: 50%;
margin-top: -1em;
background: #87ceeb;
height: 2em;
width: 2em;
line-height: 1.4em;
border: .3em solid #fff;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
}
}
}
And the html looks like this:
<ol class="rounded-list">
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
</ol>
Any ideas as to why this would blank out an iPad's browser??