התחבר | הרשמה | שאלות נפוצות
Anonymous

Website Responsive on most mobile phones except iphones and

+ פרסם תגובה

2 הודעות עמוד 1 מתוך 1


Website Responsive on most mobile phones except iphones and

על ידי Abdomen » ב' נובמבר 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:
קוד: בחר הכל
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

קבצים מצורפים

  1. s4 responsive.jpg (148.79 KiB) הורד 2172 פעמים

  2. iphone print screen.jpg (72.23 KiB) הורד 2107 פעמים

סמל אישי של המשתמש

Abdomen

  • הודעות: 2
  • הצטרף: ד' אוקטובר 01, 2014 4:56 pm

Re: Website Responsive on most mobile phones except iphones

על ידי XainPro » ב' נובמבר 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 */ }
סמל אישי של המשתמש

XainPro

  • הודעות: 3933
  • הצטרף: ו' פברואר 17, 2012 8:10 pm


+ פרסם תגובה

עמוד 1 מתוך 1