Text looks different on mobile - css

I am making a simple website for a friend and I want it to look nice on both PC and mobile, but on mobile it looks different - all the text seems shifted up or all the <div>s seem shifted down.
Does anyone know why this is happening?
How it looks on my PC using Chrome's mobile view thing, how it's supposed to look
How it looks on my phone
Thank you for your time.

You should include your code so we can see what's happening, but my first guess - if you're using media queries, are any of them targeting max-device-width/min-device-width instead of max-width/min-width? If so, change them to get a consistent experience.

Related

Safari Mobile experiencing strange spacing issues

I am about to launch a new Joomla site, and the only minor bug holding me up (not really effecting launch, just annoying) is this strange issue with iPhone (using Safari Mobile). You can see it in the image attached or use http://synthphone.com/ to see it.
Any ideas? I haven't noticed any other issue on any other browser or device. Link to the page is http://www.complisolutions.com/services.
Thanks for any assistance!
It's most likely a font size issue - note the word 'environmental' - looks to me like that cannot fit in the space allocated between the image and the left side of the screen.
Try remove that word to see if this is the case.
What you'll want to do, is use media queries to firstly make that image full page width at small screen resolutions and secondly to remove the float.

Is this demo site using media queries or responsive tables?

I have been trying to figure it out for myself with no luck. I've been getting a lot of inspiration from online Korean retail shops. Examples:
http://ecdemo96168.cafe24.com/
http://ecdemo72744.cafe24.com/
I've looked at the CSS and see nothing. The sites looks exactly the same on desktops, phones, and tablets, landscape and portrait. Is Javascript being used somewhere?
What are the designers doing to get this to work correctly? I'm asking because my site currently needs an overhaul. I want to have the site look the same on all devices. I'm not interested in having a mobile version of my site.
If you could point me in the right direction I would be greatly appreciated. If I can't figure it out myself I would like to be able to convey to the coder/designer what exactly I need my site to do and how it should be coded.
If you don't want your site to change, set the min-width. For example, if your site is set at width:1024px; add min-width:1024px; and your site will look the same on all devices.
Include that in your wrapper div that holds all of your site together.

Fluid Grid Layout Control

sorry for asking as I hate asking questions but sometimes its the last resort.
I am pulling my hair out over here and I have read hundreds of pages over the weekend and just can't get my head around how to do achieve this.
I want to have a simple 4 column 'home' landing page for desktop and ipad (sub pages will revert to 2 columns - content and sidebar). When the user goes on to a iPhone I want the user to see 2 columns.
I have managed to either get the iphone to display a scaled down version of the 4 columns using the grid system or I have managed to get it displaying 1 column, neither of which help me.
I have attached an image of what I am trying to achieve if it helps but I would really appreciate if someone who has had some experience in this field to point me in the right direction as I just cant figure it out.
I am developing using wordpress and have tried bootstrap, responsive theme and bones and getting the same results with each. Each using a responsive fluid grid. I may be barking up the wrong tree but if someone could point me in the right direction I would appreciate it.
You need to use CSS media queries, based on screen size / device width.
This will allow your CSS to style the widths of columns on each device...
http://www.htmlgoodies.com/beyond/css/introduction-to-css-media-queries.html
Current versions of Adobe Dreamweaver now also support what are called "Fluid Grid Layouts" which are worth a look for this kind of issue. They are also very helpful for quickly solving inter-device layout issues. You can design easily for Mobile, Tablet, and Desktop in one interface!

How do I fix my website so that it works on mobile devices?

I am trying to make my website resize on handheld divices but form some reason its not responding to the stylesheet.
If you take a look here: responsive design link and put www.sofiamillares.com as the site test, the top lines get cut off and everything looks super big.
Can some one please enlighten me on why is it doing that and what would be the easiest way to fix it?
This is happening because your design is not completely fluid.
Only your container div will adjust with the width (a bit)
To fix this quickly, you could
give your divs percentage widths, so they scale with the screen resolution
float your square boxes at the bottom, so they will stack on smaller screens
consider using media queries or some js device detection to target mobile devices and send them a modified css stylesheet.
Get some ideas here: http://mediaqueri.es/
As Jason suggests, creating a mobile specific version of your site is usually the best solution. You can then test the user-agent string for phrases like "android" and "iphone" and re-direct the user to your mobile site. There are libraries available for JavaScript as well as many server-side programming environments (PHP, ASPX, etc) which do all sorts of browser detection for you.
When building a mobile site, you'll of course want to make the page lightweight so it'll load quickly over a mobile data connection, and format it appropriately for a smaller screen in portrait orientation.

web app CSS trouble

I'm trying to present my notecards in a web app style.
I'm not worried about caching, or making it work offline.
I just want it render well in the iOS browser.
Here's the link: http://kaninepete.com/flashcard/review.php?Sec=3
I want it to look the same as if you re-size your browser window to 320x480.
The problem is, it always renders a huge amount of blank space off to the side.
I want to lock the scrolling to only the vertical axis (like flipping through notecards),
but also have the text at a readable size.
You can use CSS media queries to set your template on a certain width/height model. This works well and can adjust specifically for iPhone screens.
As for the font size issue you'll probably need to just spend time testing. With that it's going to require some type of virtual simulator or a real iPhone where you can test the site. I just loaded it up onto my iPhone 4 and I see what you mean about additional space - this is just because of your page size. Try messing with CSS media queries I think you'll find the answer in there.
Here is a very handy Google search to hopefully get you started on the right track. CSS3 has a lot of new features. Many of them geared towards mobile :)
Reading your question again, here's some suggestions based on what I think you're looking for.
Make sure your document is valid HTML before you continue. Safari on iOS supports HTML 5, so I'd suggest targeting that, unless your platform targets something different already.
If you just want it to run well in iOS Safari, then code for that. If you want it to look similarly in other browsers, however, then it may be necessary to look at styles targeting the iOS device (via width/height). See http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript (It seems hacky, but based on some research a week ago, this still seems to be the suggested route.)
You've got CSS that shouldn't be in there if you want to target multiple browsers. overflow:hidden and set pixel widths.
Generally, I'd say you'll want to tweak your markup as well. List items or headers would be much better than just simple breaks.
Maybe I'm just oversimplifying the question, but it looks to me like all you really need to do is wrap each notecard in a div, perhaps giving each div a <div class="notecard_wrapper">. then just attach a stylesheet that specifies the width and height you want for each card.
This page explains Safari's viewport and how to change it. It will probably fix the font size problem and maybe help with the page size.
Basically, Safari by default simulates a screen that's about 900px wide, when it's actually about 300px (so the page appears zoomed out). This makes pages designed for real computers render properly, but for a web app you usually don't want it to zoom the page at all. The viewport tag should let you control that.

Resources