I am attempting to write the front-end of a basic logon form for a website. I am a novice web developer and have run into some problems when designing the mobile version of the website. You can find the source code to my website here and an image of the form on my website here.
The website is designed to only display the UI when the screen width is greater than 1024px or when the screen width is less than 1024px and the device is in a portrait orientation. This is intentional, and when these specifications are not met this is displayed.
However, when I am in portrait mode and I click on the form, this is momentarily displayed. It quickly disappears however, and I'm pretty sure this is because once the webpage displays the "unsupported screen size" page, the form no longer exists on the webpage. This makes the keyboard slide down and the page go back to normal. To solve this issue, I referred here, but the webpage still did not work.
I then tried to remove the "unsupported screen size" page (this source code can be found here), but then this results when I click on the form. I'm pretty sure this is because I've set the height of html and body to 100%.
Ideally, I'd like to produce a webpage which retains the "unsupported screen size" page when the screen size truly is unsupported (or is in the wrong orientation), but when the form is clicked on the mobile site, I'd like to make the original webpage not change size but make it scrollable on top of the keyboard. Again, I'm a novice (this is my first time in front-end development) and I'd appreciate any help or advice for me to resolve this problem. Thanks in advance.
When I've done simple projects and I want to hide on some type of device I will use css #media rule like the following example (resize your window to see the text change)
#media only screen and (max-width: 768px) {
.small-screen{
display:inherit;
background-color: red;
}
.large-screen {
display:none;
}
}
#media only screen and (min-width: 769px) {
.small-screen{
display:none;
}
.large-screen{
display:inherit;
background-color: blue;
}
}
<span class="small-screen">show me on a small screen</span>
<span class="large-screen">show me on a large screen</span>
i had a similar problem with a form and the keyboard on mobile. when i would press on an input field the keyboard would pop up and change the page height to be smaller than the width, which would make the landscape rules apply, even though in practice the device was in portrait.
my solution was to apply the same rules i used for portrait, for the same max width in landscape.
that would look similar to this:
#media screen and (max-device-height:900px) and (max-device-width:415px) and (orientation:portrait){portrait rules}
#media screen and (max-device-width:415px) and (orientation:landscape){portrait rules}
Related
I have a web page formatted with jQuery mobile that utilizes Owl Carousel & Photoswipe and it is giving me trouble when viewed on mobile sizes. The problem is that when viewed on a portrait sized mobile phone (IPhone 5) the one image that is displayed is off center. I noticed that there is Javascript applying inline style to the ul with the class of .owl-carousel.owl-theme which sets the display to block. If I switch this to inline while debugging the page in Mobile view with developer tools in Chrome the one image is correctly centered. If I try to hard code this into the CSS then all images are stacked on top of one another and you can only click on one image (which is incorrect behavior since there are three images in the carousel/gallery).
Does anyone know what my problem is, and how to solve it so that if viewed from a mobile device in portrait (when only one carousel image is displayed) the image is centered correctly on the page? I have other pages with similar CSS for the carousel (though not jQuery Mobile) and when viewed on a mobile device the behavior is correct, so I am stumped! Thank you for any help given!
Try this CSS
CSS
ul.owl-carousel{
padding:0;
text-align:center;
}
hope this helps..
This is how I did it. Based on Chandra Shekhar's answer, but it seems the plugin is using divs instead of ul now; also I added a mobile query.
#media only screen and (max-width: 450px) {
div.owl-carousel {
padding:0;
text-align:center;
}
}
I have made a terrible error. I have built an entire website without making it responsive. Is there any quick easy way to make the whole site responsive so when in landscape mode it all looks exactly like my website on a desktop computer? I am a designer for print but not great with websites as you can see but I really do not want to start the whole site again.
Maybe a media query to with ratios? so the whole site looks the same just smaller and fits on the screen?
Thanks in advance
Try using CSS #media Rule, and specify your styles accordingly.
You can look at plugins that help you do it. RestiveJS is an example.
http://restivejs.com
For the future: the easiest way to implement the #media rules is the usage of em instead of pixel.
http://www.w3schools.com/cssref/css_units.asp
em Relative to the font-size of the element (2em means 2 times the
size of the current font)
if you then want your website to adjust to your screensize, simply use
#media all and (max-width: 768px) { // ipad width in portrait
body {font-size: 0.7em}
}
everything is 30% smaller on devices with a screen width smaller than 769px then if you used em instead of px
So i have a bit of a predicamenyt. I have a link that displays in an iframe if viewed on computer, and in parent page if on mobile device.
If viewed on the mobile device i only want users to see the page in landscape. So, i have use the following code:
<style type="text/css">
#warning-message { display: none; }
#media only screen and (orientation:portrait){
#wrapper { display:none; }
#warning-message { display:block; }
}
#media only screen and (orientation:landscape){
#warning-message { display:none; }
}
</style>
....
<div id="wrapper">
<!-- page -->
</div>
<div id="warning-message">
please turn to landscape
</div>
However, the problem comes in because of the iframe. If viewed on a computer the warning-message div is shown, not the wrapper content, despite the fact that the computer screen is landscape. I think this is because the iframe is portrait.
Does anyone know of a way to make it so that in non-mobile devices, only the wrapper div content is displayed, not the warning message (ie effectively treat all non-mobile devices as landscape)?
I hope the question makes sense.
Thanks in advance for any help.
No, this is not possible with just CSS. Your assumption is correct that the iframe itself, if taller than wide, will also trigger the portrait orientation rules, since an iframe is essentially a sandboxed browser. You'll get the same result if you open it in a desktop browser that has 'portrait' sizing.
A workaround could be, since you're already detecting desktop/mobile browsers, to add a special GET-parameter to the URL when opening in an iframe, ie. add ?iframe=1 to the URL, and then in the code (or if need be even in JS) detect this parameter to add an extra class to your html or body elements. You can then use this extra class to extend the media query rules.
Having said that I'd heavily recommend against what you're doing right now - media queries are all about making web sites and applications more dynamic, not restrictive. Prohibiting your users from holding their device the way they want to is just going to cause complaints and irritation, unneeded if you just use the same media queries to implement an alternative layout or scale down the landscape content to fit into portrait if aspect ratio is really that important.
I want to make some of the fonts on my website larger, if a visitor is using a small screen. Ideally without jquery, as I want to do this early on in the page load, and I don't want to load jquery until later, for faster loading.
The best I have come up with, is to check for screen size. But this is far from perfect. An iphone4 has relatively large size, but small screen, while some old netbook might have a smaller resolution but a larger screen. I guess what I really want is some variant of screen "DPI".
If there is some css way of saying "on a small screen do this, else on a large screen do that" that would work too.
In CSS2 there's a media property and in CSS3 this can be used to do media queries. It's not supported on all browsers, but it may be okay to use since your small devices like iPhone etc do support it.
#media screen and (min-width: 781px) and (max-width: 840px) {
body {
font-size: 13px;
}
}
This site doesn't care about IE, try it in FF or Safari, change the browser width and notice how the width changes using this property.
Media Queries are the key and are a lot of fun to use.
See http://jsfiddle.net/neebz/kn7y3/ and change the width/height of the 'Result' panel to see it working.
Example taken from : http://www.maxdesign.com.au/articles/css3-media-queries/media-sample/
Using the supersized script http://buildinternet.com/project/supersized/ on a new site. Same thing happens with the demo site. http://buildinternet.com/project/supersized/3/core.html
When I view it through my iPhone / Android, not seeing the bottom of the site, basically unable to scroll down.
Does this have to do with the CSS or that this script does not work with ?
EDIT:
Did not know that jQuery not capable of working on mobile devices. Guess that why they came up with jQuery mobile...
The issue, as far as I can tell, has to do with the inner block having an absolute position and a height:100%. That prevents the page from scrolling.
Change the position to relative and the inner block shows up below the background.
Change the height to auto and the background does not resize.
The best compromise I've come up with is to add the following to my CSS:
#media screen and (max-device-width: 480px) {
.focus_wrapper { poxsition:relative; height:auto;}
}
The image is displayed in the background but if the foreground item is longer than the screen, the background image terminates and doesn't repeat. Sorry I don't have a better answer.