I am building a site based on a bootstrap template ( see http://ironsummitmedia.github.io/startbootstrap-agency/ )
I am having a problem with the fact that when testing on my mobile device ( iphone 5 ) the whole content scales when an input field gets focus.
After typing in the text and refocusing on other content the site does not rescale back to normal.
Is there a way to fix this in css or else?
Or is this a problem with iOS ?
Thanks!
This is standard behaviour for iOS. The best way to prevent this is to set the input text size to 16px or larger. This way the window won't zoom after :focus.
There are other ways to prevent this behaviour but they have multiple drawbacks.
Related
On my individual product pages, there are drop down selection boxes which display the variants for my products. Because some of the variants have longer descriptions, this box becomes longer.
It's fine on the desktop site, but on mobile, the selection bar extends past the edge of the page. This seems to be interfering with a mobile menu I have at the top of the page.
As far as I can tell, i should be targeting 'variant-select-wrapper' but I have looked around a lot can't seem to find a way to shorten this box so that it fits on a mobile display.
Does anyone know a way to effectively shorten or fix the width of this box, or am I targeting the wrong thing?
Thanks
The following CSS ought to work for you, added to the CSS Editor in Squarespace (or to your CSS files if you're using Dev. Mode).
.variant-option select {
max-width: 100%;
}
This will limit the select box width itself so that it does not extend beyond its parent's width. This does not affect the width of the options within the select box, which will continue to extend outside of the parent (and the browser window for that matter) on Windows devices. However, on Android and iOS, the options will appear in a modal-like box, with the options of the text wrapped. This is an acceptable user experience in both cases I think.
To wrap the options on Windows devices, Javascript is needed (Ref. 1, Ref. 2), which is why I think this simple CSS approach is a reasonable compromise.
I am working on my first website and I encountered a problem with the responsiveness of the fields in my search form. I use Wordpress theme and plug-ins and I am overriding their styles with my own.
The field groups for "Price"and "Build-Up Area" don't behave as expected when I change the size of the browser window. I created media queries for every browser size which breaks the structure, but it seems that I need about 10 separate queries, even more, which I consider as inappropriate.
(e.g. I have a query for max-width 780px and then it appears that I have to create another one for max-width 767px, because for that browser size the structure is broken again) .
I have red the original CSS code of the theme/plug-in, but I can't understand where the problem comes from.
What am I doing wrong?
Thank you in advance!
my website
Dont write css as per window size. Set the width in % for all screensize. For mobile, show the input field as one by one width as 100%.
This isn't an Android app question, as such, because it pertains to anything that one could build for PhoneGap Build for Android, iOS, Windows mobile, etc.
I've built an app that has text in boxes that are a % of the screen width. I'm happy with this and it seems to work fine on my GNexus, Nexus 4, Nexus 7 and Xoom.
But one of my users on a Galaxy S3 has reported a text overflow issue on his phone.
I'm using % widths for the text boxes. Should I be doing the same for my text sizes or should I use em (which I don't really get anyway)?
If you are using
<input type='text'/>
or
<textarea></textarea>
to display information to a user and do not intend for the user to edit/modify the text box, then you should consider using a label instead.
<label></label>
This will prevent overflow issues and allow the user to scroll to see info as long as other factors aren't preventing scrolling.
If you do need to use a 'textarea' tag then using jQuery you can do:
$("#yourTextAreaId").height( $("#yourTextAreaId").scrollHeight );
Or, if you aren't using jQuery, here is some plain JS for you:
var myTextArea = document.getElementByID('yourTextAreaId');
myTextArea.height = myText.scrollHeight + "px";;
Run either one of those samples after you have set the value of the textarea and/or any time the value of the textarea changes.
I am having issues getting my Instagram images to display properly. I have tried all types of tricks and changes but cannot get it to look consistent on both desktop and mobile. It looks perfect when at full window size and across all browsers (except mobile), but when I change the size of the browser viewing window it gets all weird.
Here is my issue:
I need all the horizontal Instagram images to be responsive, meaning when I do change the size of the browser window they will adjust to the dimensions that are appropriate to view them properly. I want them to always stay in a row of 5 images across...
Here is a link to the work in progress:
http://www.jaygiroux.com/wordpress/
I have tried modifying the instapress.css to the best of my abilities but now I'm just stuck. I tried using percentages instead of pixels in some places but it's still not working...
What im reading online is that until version 3 nivo slider is not responsive, so you might want to update the library.
http://nivo.dev7studios.com/2012/05/30/the-nivo-slider-is-responsive/
Also i noticed that you're calling the tag twice (the first one is between the ie class compatibility code) so watch out for that too.
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.