I've posted this question on the support site for my Wordpress theme but haven't had any luck over there yet.
When I resize my browser window to 360px (360 because thats what my viewport width is on my Samsung Galaxy S6) I see something totally different than when I try to access my site on my phone.
My site is www.andrewpennell.com
What I've designed and am supposed to see is in the picture below.
Correct Design
But that's now what I see on mobile.
When I load my page on my mobile device I see several issues:
a) The background image doesn't seem to scale down - this may just be a simple media query I need to add.
b) My Logo, Name, and Subtitle are no where in sight (although I've seen them randomly load up under the menu bar where I can barely see a sliver of them.
c) At the bottom, social buttons and sharing go behind the footer
My primary concern at the time is problem B.
Any helpful comments are welcome.
Thanks in advance.
Check the source code for the page (right click => view source)
Do a browser find (ctrl-f) for viewport
If you don't see a meta tag something like this:
<meta name="viewport" content="width=device-width" />
then you're going to experience issues with small high res screens like the one on an S6.
Related
I've created the following web page:
http://isometricland.net/games/games.php
The problem is that on my Lumia, in UC Browser as well as Edge, the text is tiny. (Everything is rendered tiny, in fact. I have to zoom in in order to read anything.)
Is this a problem with my CSS code? Or, are the mobile browsers falsely reporting the device's screen dimensions? I wrote some media queries to render slightly different styles based on the size of the screen in em units, but the lowest sizes are not being detected.
I would like to fix this if the problem is with the web page, but I have no idea how to tell if it is the web page's fault, or what the problem is.
Please help!
Try adding the following to your <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
For further information, see Using the viewport meta tag to control layout on mobile browsers.
The next problem you're going to face is your use of tables. These will cause the page layout to be much wider, since they don't wrap. What you could do is place these within a responsive wrapper that will scroll any additional overflow:
<div class="scroll-overflow">
<table>...</table>
</div>
div.scroll-overflow {
overflow-x: scroll;
}
Lastly, you're loading a full 728x90 advertisement at the bottom of your site. This too is going to cause the overall layout to be very wide, and thus display as much smaller on your screen.
You should either place a much narrower ad here, or restrict the ad-width with CSS. And with these small changes, your site immediately becomes many times more friendly to mobile users.
Here's a before (left), and after (right).
I have been poking at this for hours now.
I used the wordpress twentythirteen theme as a starting point for a landing page I am working on. I have it looking exactly how I want it on desktop, but when I switch to my iphone, the footer doesn't render properly and there is a line that runs vertically along the right side of the frame.
Website: detroitvehiclewraps.tectonicsindustries.com
I have gone through everything I can think of and cannot make the problem go away. I deleted the PHP that detects mobile, as for the time being I want the site to display identically on mobile and desktop. Any help any of the CSS wizards on here could provide would be appreciated. I know I am just missing some inane little thing and I am absolutely losing my damn mind.
Thank you.
Try to insert a viewport meta tag into the <head>:
<meta name="viewport" content="width=990px, user-scalable=yes">
Iphone's default viewport is 980px wide, your content is 990px wide so the device scales it down. This is the "line" (10px) you observed on the right (the background color of body is white).
Note: you are mixing fluid and fixed with layout, try to clean it up a little bit. You should check out media queries too.
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.
I am trying to translate a site theme so it looks similar on a mobile device. The only devices I have to test on right now are iOS devices: an iPhone and a Gen 3 iPod Touch. The iPhone is higher resolution (Retina).
When I visit a site I'm working on ( http://diynamic.net/dev/jetcityairtours ), the theme renders the page width across only half the iDevice's total screen width, but with some elements floating out the way they do on the Chrome browser on PC. The whole site would be great if I could get the background div and the menus to render full width on the page - it'd be perfect!
I have the wordpress mobile
My questions are:
Why is the theme getting mangled?
Is there a "view-source" option for iOS Safari?
Is there another trouble-shooting solution for developing themes for iOS in particular, mobile in general?
and:
Do other people see this same effect on non-iOS devices (maybe not the right place to ask this last question).
I have a horribly ugly mobile theme in place via Wordpress Mobile Pack - just default. If you're interested in testing on mobile, please go to the non-mobile theme, link at the bottom.
I am aware of screen emulator plug-ins in Chrome and Firefox, but I am not aware of user-agent spoofing / emulating on a desktop platform.
I'm not sure if I should be posting only one question per "Question", so apologies if this is not appropriately segregated.
What you need is to use a viewport meta tag (see below for reference). More specifically, in your case, it sounds like you could solve your problem by including something like this in your head section:
<head>
...
<meta name = "viewport" content = "maximum-scale = 1.0">
...
</head>
The viewport meta tags, while created by Apple, also work with Android browsers.
For reference:
General explanation, info & examples here
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.