Website not responsive to samsung s5 and iphones

[Abdomen]

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 would be very appreciated for any help solving this issue, via css editor. I don't know what else to do.

Thank you for your time

Best Regards,

Ricardo

[edited by: not2easy at 10:03 pm (utc) on Nov 1, 2014]
[edit reason] Edited for Charter Compliance [/edit]

[not2easy]

Hi Ricardo, your post needed some editing to comply with the Charter of this forum. We do not do site reviews on the public side of this forum, but you can ask for a site review in the private, paid section. Out here, you'll need to tell us the code, the problem and what you've tried to do to fix it. There are some tips and tools to help you post the information in the CSS Forum Charter here: [webmasterworld.com...]

[edited by: not2easy at 5:15 am (utc) on Nov 9, 2014]

[Abdomen]

Hi,

I'm sorry, i just realized i broke some rules of the forum.

So following the guidelines:

I'm only editing the website via wordpress css editor, so i have no way to insert doctypes.

Problem: Samsung s5 and iphones not resistive in my website

General code present in the website:
"
.site-title {
color: #ffffff;
font-size: 60px;
font-weight: bold;
text-align: center;
width: 1100px;
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;
}

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

Relevant Code written to make mobile responsive:
"
/*mobile settings*/
@media screen and (min-width: 300px) and (max-width: 790px) {
@viewport {
zoom: 1;
width: 320px;
}

body {
padding: 10px !important;
}

.site-title, main {
font-size: 24px;
line-height: 40px;
text-align: center;
width: 285px;
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: 22px;
line-height: 22px;
text-align: center;
width: 288px;
}

#colophon:after {
content: "";
display: block;
position: relative;
top: -30px;
color: #881588;
}

.wf-active .site-description {
font-style: italic;
font-size: 14px;
}

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

.site-title, h2 {
position: relative;
width: 100%;
}
}
"
So with the coding i wrote, most android phones display the website as i wish, but on iphones and samsung s5, the display "priority" looks like being the background image.

Thanks

[not2easy]

Are you using one of the new responsive themes? The default Doctype for WP is XHTML 1.0 Transitional. Are you only serving mobile/responsive via the media query based on width? You might want to make adjustments to that, there are some good resources and information about using the best query settings at Google's Developer site: [developers.google.com...]

I suggest that site because it also deals with the topic of using pixels for measurement (like positioning and font-sizes).