Zaloguj | Zarejestruj | FAQ
Anonymous

Website Responsive on most mobile phones except iphones and

+ Odpowiedz

Posty: 2 Strona 1 z 1


Website Responsive on most mobile phones except iphones and

przez Abdomen » Pn lis 03, 2014 8:46 pm

Hello Everyone,

I have a wordpress website which works fine on most mobile phones, samsung s3 and s4 included but when it comes to iphones and samsung s5, i can't manage to make it responsive.

I have attached 2 print screen where it is possible to see the differences:

I have tried media queries, meta tags, searched on several forums for similar issues but in spite of that, i didn't succeed.
I would be very appreciated for any help solving this issue, via css editor. I don't know what else to do.

The Website code, present on css editor is the following:
Kod: Zaznacz cały
td#today {
color: #ffffff;
}

div#infinite-footer {
display: none;
}

site-info {
display: none;
}

.site-title {
color: #ffffff;
font-size: 3.5em;
font-weight: bold;
text-align: center;
width: 20em;
color: #881588;
padding: 0;
text-shadow: 0 0 80px #881588, 0 0 70px #881588, 0 0 60px #881588, 0 0 50px #881588, 0 0 40px #881588;
}

.site-title:link {
color: #ffffff;
text-decoration: none;
background-color: transparent;
}

.site-title:visited {
color: #ffffff;
text-decoration: none;
background-color: transparent;
}

.site-title:hover {
color: #881588;
text-decoration: underline;
background-color: transparent;
text-shadow: 0 0 100px #881588, 0 0 90px #881588, 0 0 80px #881588, 0 0 70px #881588, 0 0 60px #881588;
}

.site-title:active {
color: #881588;
text-decoration: underline;
background-color: transparent;
}

div.entry-thumbnail {
-webkit-filter: blur(0.4px) brightness(0.65);
}

div.entry-thumbnail:hover {
-webkit-filter: blur(0px) brightness(1);
}

header.entry-header {
background-color: transparent;
}

span.posted-on {
color: #881588;
}

h1.widget-title, a.rsswidget {
font-style: italic;
font-style: bold;
font-size: 1.35em;
color: #ffffff;
}

.wf-active .entry-meta {
font-style: bold;
font-size: 1em;
color: #881588;
}

h1.entry-title {
font-style: italic;
font-weight: bold;
font-family: Arial;
font-size: 1em;
color: #ffffff;
}

h1.page-title {
font-family: arial;
font-style: italic;
}

div.header-search {
display: none;
}

div.sharedaddy h3.sd-title {
margin: 0 0 1em;
display: inline-block;
line-height: 1.2;
font-size: 1em;
font-weight: bold;
}

#site-navigation {
color: #881588;
position: relative;
left: 4.5%;
width: 84.8em;
text-align: left;
}

h1.page-title {
font-style: italic;
font-weight: bold;
color: purple;
}

.menu-item:link {
color: #ffffff;
text-decoration: none;
background-color: transparent;
}

.menu-item:visited {
color: #ffffff;
text-decoration: none;
background-color: transparent;
}

.menu-item:hover {
color: #881588;
text-decoration: underline;
background-color: transparent;
text-shadow: 0 0 100px #881588, 0 0 90px #881588, 0 0 80px #881588, 0 0 70px #881588, 0 0 60px #881588;
}

.menu-item:active {
color: #881588;
text-decoration: underline;
background-color: transparent;
}

* {
font-family: Lucida Bright, Times, serif;
color: #881588;
font-weight: bold;
}

.wf-active .site-description {
font-style: italic;
font-size: 1.4em;
}

.wf-active .header-search .search-field {
background-color: #ffffff;
text-decoration: none;
}

.body {
width: 100%;
margin: 0 aut;
}

#content {
overflow: auto;
}

#nav, #feature, #footer {
margin: 1%;
}

h2 {
color: #ffffff;
font-weight: bold;
line-height: 1.4em;
text-align: center;
width: 50em;
}

.entry-meta a, a.post-edit-link {
color: #881588;
}

h3.sd-title {
font-size: 13px px;
color: #881588;
}

.widget-title {
color: #ffffff;
display: block;
font-size: 1.3em;
font-weight: bold;
margin-top: 0;
padding: .25em .5em;
font-style: italic;
}

.entry-title, .entry-title a, .entry-title a:visited, .entry-title a:hover {
color: #FFFFFF;
}

#colophon:after {
content: "© 2014 RMCC All Rights Reserved.";
display: block;
position: relative;
top: -2.1em;
color: #881588;
}

div.site-info {
display: none;
}

/*ipad */
div.taxonomy-description a {
color: #881588;
}

footer.entry-meta {
display: none;
}

#comments {
display: none;
}

li {
font-style: bold;
color: #881588;
}

div.menu-clubi-container a:link {
color: #881588;
text-decoration: none;
background-color: transparent;
}

div.menu-clubi-container a:visited {
color: #881588;
text-decoration: none;
background-color: transparent;
}

div.menu-clubi-container a:hover {
color: #ffffff;
text-decoration: underline;
background-color: transparent;
text-shadow: 0 0 100px #881588, 0 0 90px #881588, 0 0 80px #881588, 0 0 70px #881588, 0 0 60px #881588;
}
}

div.menu-clubi-container a:active {
color: #881588;
text-decoration: underline;
background-color: transparent;
}

p {
color: #ffffff;
}

div {
color: #ffffff;
}

#site-navigation a:link {
color: #ffffff;
text-decoration: none;
background-color: transparent;
}

#site-navigation a:visited {
color: #ffffff;
text-decoration: none;
background-color: transparent;
}

#site-navigation a:hover {
color: #881588;
text-decoration: underline;
background-color: transparent;
text-shadow: 0 0 100px #881588, 0 0 90px #881588, 0 0 80px #881588, 0 0 70px #881588, 0 0 60px #881588;
}
}

#site-navigation a:active {
color: #ffffff;
text-decoration: underline;
background-color: transparent;
}

table#wp-calendar caption {
font-size: 1em;
color: white;
}

ul.event-list {
font-style: bold;
font-size: 1em;
}

div.menu-club-3-container a:link {
color: #ffffff;
text-decoration: none;
background-color: transparent;
}

div.menu-club-3-container a:visited {
color: #ffffff;
text-decoration: none;
background-color: transparent;
}

div.menu-club-3-container a:hover {
color: #881588;
text-decoration: underline;
background-color: transparent;
text-shadow: 0 0 100px #881588, 0 0 90px #881588, 0 0 80px #881588, 0 0 70px #881588, 0 0 60px #881588;
}
}

div.menu-club-3-container a:active {
color: #881588;
text-decoration: underline;
background-color: transparent;
}

.videopress-watermark {
display: none;
}

.videopress-title {
display: none !important;
}

/*-------------------------------------------------------------------*/
/*mobile settings*/
@media screen and (min-width: 300px) and (max-width: 790px) {
@viewport {
zoom: 1;
width: 1em;
}

body {
padding: .625em !important;
}

.site-title, main,h2 {
font-size: 1.5em;
line-height: 1.5em;
text-align: center;
text-shadow: 0 0 30px #881588, 0 0 20px #881588, 0 0 10px #881588, 0 0 5px #881588, 0 0 1px #881588;
}

h1.menu-toggle {
display: none;
}

.site-title:hover {
text-shadow: 0 0 50px #881588, 0 0 40px #881588, 0 0 30px #881588, 0 0 20px #881588, 0 0 10px #881588;
}

h2
font-size: 10px;
line-height: 22px;
text-align: center;
width: 288px;

#colophon:after {
content: "© 2014 RMCC All Rights Reserved.";
display: block;
position: relative;
top: -94%;
color: #881588;
}

.wf-active .site-description {
font-style: italic;
font-size: 87.5%;
}

div.taxonomy-description {
color: #ffffff;
}

.site-title, h2 {
position: relative;
width: 100%;
}
}


Thank you for your time

Best Regards,

Ricardo

Załączniki

  1. s4 responsive.jpg (148.79 KiB) Pobrane 1851 razy

  2. iphone print screen.jpg (72.23 KiB) Pobrane 1812 razy

Avatar użytkownika

Abdomen

  • Posty: 2
  • Dołączył(a): Śr paź 01, 2014 4:56 pm

Re: Website Responsive on most mobile phones except iphones

przez XainPro » Pn lis 17, 2014 6:58 am

iPhone 5 Media Queries
iPhone 5 in portrait & landscape

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) { /* STYLES GO HERE */}

iPhone 5 in landscape

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) { /* STYLES GO HERE */}

iPhone 5 in portrait

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) { /* STYLES GO HERE */ }
Avatar użytkownika

XainPro

  • Posty: 3933
  • Dołączył(a): Pt lut 17, 2012 8:10 pm


+ Odpowiedz

Strona 1 z 1