My website is having display issues specifically on Samsung and Motorola devices, even when using different browsers. It seems that the area using transform CSS is breaking apart. You can view my website at
I've tried several fixes but nothing seems to work. Can anyone provide some assistance?
Thank you,
MRT
Check out this HTML code:
<body>
<div class="container">
<!-- Start Nav Structure -->
<div class="cn-wrapper" id="cn-wrapper">
<ul>
<li><a href="beliefs.html"><span>values</span></a></li>
<li><a href="dogs.html"><span>dogs</span></a></li>
<li><a href="walkers.html"><span>walkers</span></a></li>
<li><a href="cats.html"><span>cats</span></a></li>
<li><a href="index.html"><span>home</span></a></li>
</ul>
</div>
<!-- End Nav Structure -->
<!-- Top Navigation -->
<div class="sunny"><img src="sunny.jpg" width="100%"></div>
<header>
<h1>CHICAGO ALL WEATHER WALKERS<br><span>Sunny, warm, prompt - everyday!</span></h1>
<h1><span style="color:#030";>dependable dog walking/sitting, cat sitting, home stays, more...</span></h1>
<h1 style="color: #C33"; > call (312) 373-0507</h1>
<p>
<strong>Give us a bark:</strong></p><br>
<p>
<i class="icon-twitter icon-4x"></i>
<i class="icon-google-plus icon-4x"></i>
<i class="icon-facebook icon-4x"></i>
</p>
<br>
</header>
</div><!-- /container -->
<script src="js/polyfills.js"></script>
</body>
CSS style:
.csstransforms .cn-wrapper {
font-size: 1em;
width: 26em;
height: 26em;
overflow: hidden;
position: fixed;
left: 50%;
border-radius: 50%;
margin-left: -13em;
position: absolute;
border-radius: 50%;
pointer-events: auto;
}
.csstransforms .cn-wrapper li {
position: absolute;
font-size: 1.5em;
width: 10em;
height: 10em;
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
overflow: hidden;
left: 50%;
top: 50%;
margin-top: -1.3em;
margin-left: -10em;
-webkit-transition: border .3s ease;
-moz-transition: border .3s ease;
transition: border .3s ease;
}
.csstransforms .cn-wrapper li a {
display: block;
font-size: 1.18em;
height: 15em;
width: 14.9em;
position: absolute;
bottom: -7.25em;
right: -7.25em;
border-radius: 50%;
text-decoration: none;
color: #fff;
padding-top: 1.8em;
text-align: center;
-webkit-transform: skew(-50deg) rotate(-70deg) scale(1);
-ms-transform: skew(-50deg) rotate(-70deg) scale(1);
-moz-transform: skew(-50deg) rotate(-70deg) scale(1);
transform: skew(-50deg) rotate(-70deg) scale(1);
-webkit-backface-visibility: hidden;
-webkit-transition: opacity 0.3s, color 0.3s;
-moz-transition: opacity 0.3s, color 0.3s;
transition: opacity 0.3s, color 0.3s;
}
.csstransforms .cn-wrapper li a span {
font-size: .6em;
opacity: 0.7;
top: -.9em;
}
/* for a central angle x, the list items must be skewed by 90-x degrees
in our case x=40deg so skew angle is 50deg
items should be rotated by x, minus (sum of angles - 180)2s (for this demo) */
.csstransforms .cn-wrapper li:first-child {
-webkit-transform: rotate(-10deg) skew(50deg);
-ms-transform: rotate(-10deg) skew(50deg);
-moz-transform: rotate(-10deg) skew(50deg);
transform: rotate(-10deg) skew(50deg);
}
.csstransforms .cn-wrapper li:nth-child(2) {
-webkit-transform: rotate(30deg) skew(50deg);
-ms-transform: rotate(30deg) skew(50deg);
-moz-transform: rotate(30deg) skew(50deg);
transform: rotate(30deg) skew(50deg);
}
Note that there may be an issue with the list items skewing on some Samsung devices running the Android default browser. Visit www.cawws.org for more information.
Can the Data attribute of an HTML5 select box be used as a parameter for a stored procedure in C# .net? Instead of relying on the SelectedValue of a DropDownList. Take a look at the following HTML5 dropdown... <select name="GlobalOrigin" id="ddlCountr ...
<thead> <tr> <th ng-click="sortData('firstname')"> Firstname <div ng-class="getSortClass('firstname')"></div> ...
After researching extensively, I am still confused about the difference between a Jquery $.post method and submitting an HTML form using post. Here is my code for the jQuery implementation: $.post( "/test", query , function( data ) { console.log(data) ...
I've successfully integrated the qtip2 with fullcalendar jQuery plugin, which are both amazing tools. However, I'm encountering an issue with the positioning of the qtip. Here's the code snippet I'm using: $(window).load(function() { ...
Is there a way to implement a delete confirmation dialog? When 'yes' is clicked, the message should be deleted, and when 'no' is clicked, the delete operation should be canceled. At present, this is how it looks in my view: <a href ...
My single page app requires that link clicks are not processed in the regular way, but are instead passed to my router. I currently have a menu code that works perfectly (with the goto function changing the HTML and returning false): <a class="nav- ...
Hello there! I'm currently working on developing a navigation drawer that is similar to the one in the Gmail app. While I have been following the developer site for guidance, it only covers the basic implementation. What I really need help with is cus ...
Working on an Android Studio project has led me to attempt calling a C++ class object by passing a variable (such as integer or double) from Java and returning a result (double) from the C++ Class Object using the JNI interface. After successfully compilin ...
After attempting to follow the instructions provided at https://github.com/RadiusNetworks/bluetooth-crash-resolver, I encountered difficulties and was unable to succeed. When I copied the file BluetoothCrashResolver.java from the bluetooth package and inse ...
Does anyone know why the blink effect isn't working on Google Chrome? <p class="blink">at least it's not Comic Sans</p> <style> .blink { animation-duration: 1s; animation-name: blink; animation-iteration-count: infinite; anima ...
Trying to achieve a layout similar to the last element at the bottom of the footer] 1, but getting something like this instead: https://i.sstatic.net/lXazk.png <footer> <div class="container-fluid"> <div class="row"> ...
Is there a way to make text headings responsive? When looking at the example provided here, we can see the heading is "The Swift List". How can I ensure that the words "THE" and "LIST" remain aligned with the edges of the word "SWIFT"? While I have managed ...
<html ng-app> <head> </head> <body data-ng-controller="Myfunc"> <ol type="i"> <li data-ng-repeat="c in cust | filter:name"> {{ c.name | lowercase}} - {{c.city | lowercase}}</li> </ol> ...
I am looking for a way to integrate a deeplink in the description of a calendar event generated by my app. The information associated with the event is dynamic and it would be more convenient for users to access the relevant resource within the app itself. ...
I have created a method in the MainActivity Class that I utilize from various other activity classes to set up Tabs in the application bar for all activities. However, I am encountering a java.lang.NullPointerException error when calling this function fro ...
The issue I am facing is due to the limitations of IE 8 on CSS files. Within my Flask project, some of my CSS files exceed these limits, causing them not to render correctly. Is there a way to split CSS files using Python in order to ensure that they meet ...
I have encountered an unusual issue with my material design app. Some of the thumbnails are working fine and opening the details activity as expected, but others are causing crashes instead. You can watch the problem I am facing in this video. I have inclu ...
My fixed-top bootstrap 4 navbar expands on large screens and collapses on smaller screens. I added padding-top to the <body> to avoid overlap with the main body content. However, when the collapsed navbar is expanded on smaller screens, it fills the ...
Wanting to Customize Grid Background Colors in Line Chart using react-chartjs-2 I am looking to have different background colors for each grid in my Line chart. Is this functionality possible with the react-chartjs-2 library? This is the desired appearan ...
I'm currently exploring the functionality of vertex and fragment shaders in OpenGL ES 2.0. Here is an example of my shader code: vertex shader: // snippet from the vertex shader attribute vec4 vPosition attribute vec2 a_texCoord; varying vec2 v_tex ...