Jump to content


Photo
- - - - -

CSS problems in mobile browsers


  • Please log in to reply
16 replies to this topic

#1 Willem-Siebe Spoelstra

Willem-Siebe Spoelstra

    Super Member

  • Members
  • 228 posts
  • LocationAlmere
  • Country: Country Flag

Posted 20 June 2013 - 09:25 AM

Hi,

 

I hope somebody can point me in the right direction.

 

In pagelines I disabled mobile view.

 

I see some problems testing it on my mobile device.

 

- Black line around logo at Google Chrome

Please Login or Register to see this Hidden Content

- Text all pushed to the left at Dolphin Browser

Please Login or Register to see this Hidden Content

Kind regards,

 

Willem



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 20 June 2013 - 02:00 PM

Willem, 

 

I'm unclear how the area of the site was created, where the line appears.  There simply may be a CSS component your browser doesn't pick up correctly in or out of mobile view.  For that reason, we provide the

Please Login or Register to see this Hidden Content

, free in our Store.  Similarly, the alignment may also be affected by CSS or by a plugin. It would require inspection, which unfortunately I can't do.



#3 Willem-Siebe Spoelstra

Willem-Siebe Spoelstra

    Super Member

  • Members
  • 228 posts
  • LocationAlmere
  • Country: Country Flag

Posted 23 June 2013 - 02:06 PM

Hi Rob,

 

Normally I am able to find the problems on my PC using the developer tools integrated in Chrome and IE for example. 

Is there something like that for mobile browsers too?

 

I believe that maybe something is wrong in my CSS, but changing anything in the CSS is just guessing in the dark since I don't have the tools available in my desktop browser.

 

Hope you can point me in the right direction. Your tip for Browser Specific CSS plugin is valuable to me, however I only can use that when I find the problem in the CSS.

 

Kind regards,

 

Willem-Siebe Spoelstra



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 23 June 2013 - 02:30 PM

Willem,

 

I think I know what the problem is, and CSS isn't the solution.

 

You are 'scaling' the image.  In other words, you have an image that is larger than the container in which it resides. The solution is to resize the image in a graphics editor to fit precisely the space where it goes.  Presently I see "300px × 300px (scaled to 190px × 190px)" in the image info for your branding logo. 

 

Open the image in some program like Photoshop.  Resize it from 300px x 300px to 190px x 190px and rename it.  Upload the renamed 190px sized image to replace the larger one. I suspect the shadow will vanish.

 

Why did this happen? Well, some browsers like IE don't scale images very well.  Older versions of IE don't even try to do it.  We've answered many topics in this forum for people seeing their post images and post thumbnails bleeding into sidebars or right off the screen, and even breaking pages and posts. All from this scaling issue.

 

I suspect the Dolphin browser (which I do not know), is having an issue with the size, and creating a shadow, not because of CSS, but because it is having trouble dealing with the scaling.

 

Let us know if this works, please.



#5 Willem-Siebe Spoelstra

Willem-Siebe Spoelstra

    Super Member

  • Members
  • 228 posts
  • LocationAlmere
  • Country: Country Flag

Posted 23 June 2013 - 09:47 PM

Hi Rob,

 

Thanks for your explenation. I changed it, besides the fact I have a smaller image size for the logo (which is great) it doens't change anything. 

 

So in Google Chrome I still have the border/shadow around the div, and in Dolhin browser the text is still pushed to the left.

 

I did a lot of CSS changes 'in the dark' like remove padding, remove margin, border to zero etc, but nothing has effect.

I also did a lot of research in Google but that didn't help either :-(.

 

Kind regards,

 

Willem



#6 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 24 June 2013 - 11:52 PM

Hi Willem

 

Rule of thumb would be to target the element using css on the desktop, use that then apply the browser class prior. That way it will target the same element but only on the mobile browser. In this case it looks like .mainlogo-img is what the border is being applied to.

 

If you have a live link to the site we might be able to help you track it down.



#7 Willem-Siebe Spoelstra

Willem-Siebe Spoelstra

    Super Member

  • Members
  • 228 posts
  • LocationAlmere
  • Country: Country Flag

Posted 25 June 2013 - 01:49 PM

Hi James,

 

Thanks for your explenation, however I'm not quite sure if I understand what you are saying (because of my lack in english probably).

I think you are talking about the browser specific plugin using the classes .desktop and one for the browser prior to .desktop. However, I'm not sure about the last one (there is Chrome on mobile and on desktop), and I'm not sure how this would result is different CSS for the mobile. Besides that, I don't know if it needs different CSS because I was not able to find the (CSS) problem.

 

What I do understand, is that you ask for a link to see if you can help to track down the problem, which I really appreciate. 

 

The link at this moment is the same as mentioned in my first post:

Please Login or Register to see this Hidden Content

Kind regards,

 

Willem



#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 25 June 2013 - 11:09 PM

Willem,

 

You need to put the browser specific code in front of that to make changes to the site logo as it is showing a black border in Dolphin.

 

James is suggesting that this sort of CSS would help, modified, of course, to your specific needs:

 

body.mobile .mainlogo-img {;}

 

There is an inspector for Firefox on Android:

Please Login or Register to see this Hidden Content

 

Here's some other helpful info: 

Please Login or Register to see this Hidden Content



#9 Willem-Siebe Spoelstra

Willem-Siebe Spoelstra

    Super Member

  • Members
  • 228 posts
  • LocationAlmere
  • Country: Country Flag

Posted 01 July 2013 - 07:58 AM

Hi Rob, I'm going to read the documentation and will let you know if I was able to solve this problem. Thanks.



#10 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 02 July 2013 - 01:50 PM

No problem!



#11 Willem-Siebe Spoelstra

Willem-Siebe Spoelstra

    Super Member

  • Members
  • 228 posts
  • LocationAlmere
  • Country: Country Flag

Posted 13 July 2013 - 02:56 PM

Hi Rob,

 

An update and request on this topic.

 

1) About the problem in Chrome with the border around the logo, didn't solved it yet, but strange thing is that in Chrome on an iPhone it does not have a problem, but with chrome on my samsung it does...

2) About the problem in Dolphin browser that the text is pushed to the left (no mobile view, normal view), this is not a problem I caused. I just installed pagelines on a fresh wordpress install, and the problem is already there. Can you have a look into this problem? I made a screenshot of it again from this clean install, if you want that please let me know.

 

Kind regards,

 

Willem



#12 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 13 July 2013 - 04:05 PM

Willem,

 

Feel free to share any screenshots.

 

Please note though, that the Browser Specific CSS plugin isn't just for fixing styles on mobile devices.  You can adjust for most every browser.  I don't know about Dolphin, as I've never heard of that one before you first mentioned it. 

 

I just installed Chrome for my Samsung phone, viewed your site and do not see anything wrong with it.  No border around the logo in Chrome. I checked Opera, Firefox, IE and Safari just to be sure and the site looks exactly the same in every single one of them.  I cannot replicate it.

 

I've tried installing Dolphin on my device, but can't get it to work.  Considering how few people use Dolphin, I just wonder if it's worth doing all this work for a small percent of the browsing public.  Meanwhile, I'd ask the people at Dolphin to find out what their problem is with your site.



#13 Willem-Siebe Spoelstra

Willem-Siebe Spoelstra

    Super Member

  • Members
  • 228 posts
  • LocationAlmere
  • Country: Country Flag

Posted 22 July 2013 - 10:45 AM

Hi Rob,

 

Thanks for all the testing you did, really appreciate it. 

 

1) About the 'border' problem in Chrome around the logo, I checked it again and suddenly it's not there anymore. But this has to be a change from Google Chrome browser, because I didn't do anything.

2) About the problem with Pagelines in Dolphin browser, first about the browser. In my opinion it's quite a populair browser with 10.000.000+ downloads. 

Here the image on a fresh install where you can see the problem:

Please Login or Register to see this Hidden Content

Like I explained this is not a problem with 'my' website, because the problem is already there with a fresh pagelines install. Is this something you are going to investigate?

 

Kind regards,

 

Willem



#14 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 23 July 2013 - 07:37 AM

Hi Willem,

 

I agree that it's not a problem with your website, but at the same time, I don't think it's necessarily a problem with PageLines either.  As you know, we have covered all the principle mobile platforms in our mobile CSS.  In looking at your image, Dolphin isn't taking the mobile view, but is using the view one sees on a mobile device if "Disable Mobile View" is checked.

 

That may mean that Dolphin isn't reading the generic CSS like .mobile and has created a unique class that isn't well known yet.  I realize that 10 Million users is quite a lot. But compare that to the hundreds of millions who use Firefox and nearly 1/2 Billion using Chrome. I mean no disrespect to Dolphin. If many developers aren't aware of it, they may not be writing their code to suit any specifics it may have.



#15 Willem-Siebe Spoelstra

Willem-Siebe Spoelstra

    Super Member

  • Members
  • 228 posts
  • LocationAlmere
  • Country: Country Flag

Posted 23 July 2013 - 08:20 AM

Hi Rob,

 

Thanks for your answer.

 

In looking at your image, Dolphin isn't taking the mobile view, but is using the view one sees on a mobile device if "Disable Mobile View" is checked.

 

 

The  reason for that is because I disabled mobile view in Pagelines, does .mobile then still apply?

 

Kind regards,

 

Willem



#16 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 23 July 2013 - 09:44 PM

Willem,

 

It may well do, but that's not up to us. It totally depends on whether Dolphin uses the .mobile tags.  If it does, you'll know pretty quick, once you untick the checkbox for Disable Mobile View and browse the site in Dolphin.

 

If it's disrupted in Dolphin, but looks correct in other mobile browsers, my suggestion would be to reach out to the folks at Dolphin and ask them what CSS tag they're using that's comparable to .ie or .mobile, or any other options in Browser Specific CSS.



#17 Willem-Siebe Spoelstra

Willem-Siebe Spoelstra

    Super Member

  • Members
  • 228 posts
  • LocationAlmere
  • Country: Country Flag

Posted 31 July 2013 - 10:54 AM

Hi Rob,

 

First offtopic: I just read some awesome tips in the DMS Docs I was looking for. I want to improve my skills for coding, but couldn't find any good 'schools' for this. Your list:

 

is helping me for sure. Is there one you like the most?

 

Google seems to work together with Code School: 

Please Login or Register to see this Hidden Content

 

Now ontopic: I send Dolphin Browser an e-mail. The Dolphin browser on my iPhone 4S didn't cause any problems, but on my Samsung Galaxy  Note II it did. But just to understand, you again are talking about .mobile tags. However, I was thinking, when I choose in Pagelines to disable the mobile view, all my normal CSS applies. What has .mobile tag to do with it right now? 

 

I have an other question about mobile differences, but I start a new topic for that.

 

Kind regards,

 

Willem