I have developed a custom wordpress template based on theme twentythirteen.
The theme works fine on desktop, it's so so on tablets, and looks really wrong on smartphones.
The customized parts (the one that I made) resize correctly to take all the width possible, but the content structure that I kept of the original theme becomes more narrow that the screen. On smartphones the content width is like 20% of the available screen width.
How can I check what is wrong to fix it? I do suppose that it could be the other way around: the customizations stay too big, while the responsive layout resize itself correctly, with the result that the mobile browser scales everything to fit and I get my changes fine and the responsive part very small.
In that case, how could I fix the resize of my custom parts to fit nicely?
I looked for remote debugging and I solved my issue using this solution:
https://developers.google.com/chrome-developer-tools/docs/remote-debugging
Related
I'm struggling to understand what width size to design my mobile theme in. A previous design company drafted me an app design and it was all produced using a 640px wide template, this is the ideal size I want to create my new theme in because it works well with the outline icons I want to use which are 48px and this is the right size for the Navigation Bar.
However the coder who will be putting the mobile theme together has suggested I produce the theme at a width of 1080px which is almost double the width size I am currently using and I will not be able to size up the icons to fit this size.
I'd really appreciate some advice on this, I've read that it's also an option to create multiple sizes which automatically convert depending on which device is used.
It depends what kind of application are you talking about. If it is a website, then 320-480 is the ideal for portrait, around 640 for landscape.
If it is a native application, then you might want to use 1080p, because modern mobile phones support full HD apps. Therefore it will look much nicer & crisper.
Also you want to think about if its going to be responsive ( adapting to screen width ) or not.
I'm using the Google Translate widget ( http://translate.google.com/manager/website/ ) on my website. It works fine on the desktop screen, but it uses the exact same layout on mobile and other small screens, and looks terrible. For one thing, the iframe containing the list of languages has a hard-coded width of 860 pixels. You can't select any languages beyond the 3rd column because they're off the edge of the screen (and you can't scroll to the right to see them because the browser doesn't realize that the iframe is too wide -- I assume it's the same problem as discussed here: Webpage with wide iframe is not scrollable on an iPhone with viewport ).
I've looked into fixing the problem using CSS, but CSS can't "see" inside iframes. I've searched all over stackoverflow and the rest of the internet, and not only have I not found a solution, I haven't been able to find anyone else complaining about the problem. I can't be the only one, can I?
I found a solution: Instead of "Dropdown only" layout, I chose "Horizontal". When you do that, Google uses a simple drop-down list instead of a big iframe.
The little panel that appear at the top of the page is still too wide to display properly, however, but that's a minor issue.
I used Highslide JS about 5 years ago on this site: http://wela.ctc.edu/academy12-13.aspx (example page). Now I'm redesigning the site use Twitter.Bootstrap and am trying to figure out how I can tweak the Highslide popups to work in a small device width. Is this possible or should I use find another solution to implement? I've played around with the setting parameters in my highslide-with-html.js file, but the results have been unsatisfactory. If it is possible to use Highslide in a responsive design, would be grateful for any URLs to look at.
The short answer is that Highslide adapts very well to small devices if you're opening images. The expander is purpose-built to do just that - display the image as large as it can without exceeding the boundaries of the viewport.
But when opening anything else - an expander with HTML content, an iframe, etc. - the expander must initially be a fixed size. You can put a resize handle on it, but that's not really good enough for handling everything from a smartphone to a large monitor.
Without rewriting Highslide JS, overcoming this limitation would require that your page do its own detection of the viewport size, then either modify the call to htmlExpand() on the fly, probably with some jQuery manipulation, or change the .highslide-html CSS class width. The latter approach (targeting the CSS) seems like it would be easier.
I am creating my first responsive site, I am having trouble because when the iPhone is in portrait orientation, the text looks fine, but while turning to landscape, the text, images, etc all zoom in and get bigger to fit the screen. The font-size is in pixels so shouldn't it stay the same? How do I make it so it stays the same size and just adjusts the text wrap? An example of what Im trying to achieve would be this site on an iPhone. Thanks.
This sounds like the iOS orientation bug. There's a lot of incorrect advice out there to set a maximum scale in the viewport meta tag which seems to fix it but actually introduces a number of other issues. You might want to look at the workround to see if this does what you need.
Would like to have the plugin change size as part of an internal Silverlight animation. Possible? Can't seem to find answer. Thx.
You probably don't want to do that. You're much better off having the plugin take up 100% of the window and then set it to Windowless = true so that you can overlay the HTML.
I was recently moving the plugin around on the page while scrolling and it was very choppy, but when I switched to moving the html content up and down the page instead it was smooth.
You could animate the size by calling out the Javascript and using a DispatchTimer, but like I said that would probably be choppy and there is probably a better way.