Responsive to most mobile phones except iphones and samsung s5
-
Hi everyone,
My wordpress website is generally responsive on most androids, but on iphones and samsung s5, it doesn’t like the way it should. I would be quite appreciated for any help solving this issue.
This is the code present in the css editor of my wordpress website. It’s the only way i have to edit it.
The relevant code written on css editor is the following:[CSS removed by @thesacredpath]
Thanks for the help
The blog I need help with is: (visible only to logged in users)
-
Hi, I verified the misalignment on my iPhone, but can’t actually edit the CSS on my phone, and viewing the responsive layouts show no issues, but I think I might know what is going on. Right now your background image is aligned to the left, while your site content is centered. If you go to Appearance > Background and set the alignment to top center, I believe things will clear up for you. Give that a try and then view things on the iPhone. You may have to clear the Safari cache on the phone at Settings > Safari.
-
Hi,
Thanks for the fast reply!Unfortunately, centering the background didn’t solve the issue.
I will write the entire code, to help detecting the issue:
[CSS removed by @thesacredpath]
Regards,
Ric.
-
Hi,
I managed to solve the issue with responsive on iphones:
Basically i put
#site-navigation { width:100% }and it did the trick.
Unfortunatel now i’m with other problem which is the ipad responsive problem, as when i move it to landscape, it lose resolution and zooms in everytime i came back to portrait. Any idea how to solve it?
Thanks for the help
-
I do see a slight delay when I return to portrait on my iPad Air iOS 8.0.2 in Safari, but it is less than a second. Are you on cellular data or on wi-fi when it happens? I have only wi-fi so I can’t check on cellular data.
-
-
Hi,
I use wi-fi connection. The main issue is that in the landscape position, it lose resolution, so it’s not so attractive.Thanks, although i found it by accident :)
-
Hmmm, for desktop systems, if you hover a mouse, the opacity of the image changes. For some reason, they set the opacity of the home images to 0.9 for screens narrower than 1124px (tablets and phones). Add the following and see if this takes care of the issue.
@media only screen and (min-width: 768px) and (max-width: 1124px) { .blog .entry-format:before, .archive .entry-format:before, .blog .entry-meta, .archive .entry-meta { opacity: 1; } } -
Hi,
Yes, it did, now the ipad is fully responsive, except for the menu items page.
I do remember having in the code hovering the ‘ #site-navigation’ and ‘div.menu-clubi-container:a’. I’m almost sure this is the source of the problem
Everytime i select one of the item from the top menu (clubs in this case), the website stops being responsive in the next page, when using ipad.
So, is there a way to make these values default , so that ipad will be 100% responsive?
Thanks
-
@rmccastro, let’s try something. Copy and paste all of your custom CSS into a plain text file for safe keeping (Notepad or…) and then delete it from your Custom CSS and save and then give your site a try on your iPad and see what happens.
Also, when you say “responsive” do you mean that look of the site is not conforming to the iPad screen, or do you mean that you can’t navigate and scroll around? I’ve visited your site on my iPad Air in Safari and don’t have any issues and your site looks the way it should and I can scroll around and click on stuff. I do sometimes see a delay in pages loading
Which iPad do you have, are you using Safari, and which version of iOS are you on?
Let me know what happens for you on your iPad when the CSS is back to the original.
-
Hi,
Well, the website got quite faster and indeed 100% perfectly responsive, even at the top menu item pages.
So definitely, there is some kind of errors in the code before the media queries. I will try to remove the hover in the ipad code to see if something changed.
Meanwhile, any idea/suggestion why only the top menu items (name of the clubs) are not responsive as the rest of the site?
-
Meanwhile,
i tried to use a reset css code (http://www.cssreset.com/), inside the ipad media query and unfortunately didn’t solve the lag and the issue with the top menu items. So whatever bad coding is, is the one that defines the desktop view.
I tried to improve the code, so right now the code, before the mobile an d ipad media queries is the following:
[UPDATE: CSS removed by staff. Please use a site such as http://pastebin.com/ to share large blocks of code. Do not paste large blocks of code into the forums. Note that it’s usually more helpful to look at large amounts of CSS directly in a browser using a web inspector anyway.]
http://pastebin.com/KHQu8yDQ (expires in 1 month)
I’m using a ipad mini 16gb, iOS 7.1.1 and i’m using safari browser.
-
Please do not post large blocks of code into the forums. Please use a site such as http://pastebin.com/ instead to share large blocks of code.
-
i tried to use a reset css code (http://www.cssreset.com/), inside the ipad media query and unfortunately didn’t solve the lag and the issue with the top menu items.
I wouldn’t recommend this unless you are starting your CSS code completely from scratched, which is a very advanced option.
You’re getting into some very complex questions which might be outside the scope of what we can help you with in these forums! But I will do my best to direct you to find the answers yourself.
We should take things one step at a time, preferably in one issue per thread here in the forums. I will focus on this comment next:
Meanwhile, any idea/suggestion why only the top menu items (name of the clubs) are not responsive as the rest of the site?
In your custom CSS, you have a media query setup like this:
@media screen and (min-width: 200px) and (max-width: 667px)Inside that section you have this rule:
#site-navigation { width: 100%; }I think that is making the navigation properly responsive, and that’s what shows up in my testing. That percentage value appears to be breaking outside it’s parent container, and that usually has something to do with positioning. I noticed the position for #site-navigation is set to “relative” somewhere along the way. Maybe try changing it to “static” which is the default for the position property.
#site-navigation { width: 100%; position: static; }However, adding on more CSS to attempt to correct bad CSS you have added in previous media queries and other CSS may continue to get you into trouble. So, what you might want to do instead is look through ALL of your CSS, find every single rule you made for #site-navigation and check to see if you are setting it to “position: relative;” yourself because that might be the root cause of the problem and just adding more CSS to override your own past CSS will continue to make things more and more difficult to troubleshoot. Cleaning up past CSS as you go is a really good idea! It takes a lot of work and attention to detail to do this, but it is worth it.
Please note that we do not have every device available to test on directly, but what we can do is help you look at major breakpoints using the tools provided in the WordPress.com customize tool. The tool looks like this: https://cloudup.com/cG6jjSgyxT9 and you can use the button on the right to approximate a small screen size. That is what I am mainly using for testing.
- The topic ‘Responsive to most mobile phones except iphones and samsung s5’ is closed to new replies.
WordPress.com Forums 