How to make the page to fit screen width on mobile device? - javascript

I have the one form page. I need this form scaled and fit to screen width on any device (Android, iOS, ...). How can I do it with HTML or CSS? style="width:100%" is not a solution in my case.
Thanks!

Why is width:100% not an option?
You can use media queries to target different screen sizes like so:
form {
width: 800px;
}
#media only screen and (max-width: 800px) {
form {
width: 100%;
}
}
The above code would make form 800px wide on any screen wider than 800px, and if it is displayed on a screen size equal to or below 800px wide it will be 100% instead. You can use as many of these as you want, so for instance you could put another media query after this for max-width: 500px and change the form styles accordingly for screen sizes 500px and below.

Related

Why are my HTML elements moving around depending on screen size or zoom?

My HTML and CSS elements are moving around depending on the screen size or zoom of a page. I have screenshots of this example.
This is what it ends up looking like
What it SHOULD look like
If your HTML and CSS elements change with the screen size you can either write media queries or try putting your CSS in terms of percentages rather than pixels. For instance given this CSS code:
.some-class {
width: 300px;
padding: 25px;
margin-top: 10px;
}
All of those measurements in px are going to look very different on a phone screen vs a laptop screen because 300px is about 1/2 the width of a phone screen but only about 30% of a laptop screen. Rather than specify width in px, we can say we want some-class to take up a certain percentage of the screen like this:
.some-class{
width: 30%;
}
Or like this:
.some-class{
width: 30vw;
}
For the padding and margin we can write a media query, which changes the CSS according to screen size. Assuming our original code is for a laptop and we want to make it fit on a phone screen we can add the following to our CSS stylesheet:
#media screen and (max-width: 480px;){
.some-class {
padding: 15px;
margin-top: 5px;
}
}
This overwrites the original CSS if it detects a screen smaller than 480px across. It's worth knowing how to write media queries anyway in case something that is horizontally aligned on a laptop should be vertically aligned on a phone so here's a helpful link.
https://www.w3schools.com/Css/css3_mediaqueries_ex.asp

How to increase the distance of one element from another as the width gets smaller?

I am creating a website with HTML/CSS/JS and encountered a problem.
On the front page, I have a image and a text over the image, the image has a 100% width and a fixed height of 487px, I set the text to position:relative; and top:34vh.
When the website is on the normal desktop size, it looks as it should,but when I try to make it responsive, as the width gets smaller the text, as it should, gets smaller too, and its position alternes. What I want is to have the text sticky to the bottom side of the image.
I will present an example of how it looks and how would I want it to look like.
Thank you in advance!
Media queries.
I'll go something like this:
.element {
margin-top: 50vh
}
#media only screen and (min-width 500px) {
.element {
margin-top: 90vh
}
}
#media only screen and (min-width 1000px) {
.element {
margin-top: 90vh
}
}
So I have used bottom: 2 em;.
Thanks #Pete for the answer in the comments.

How to scale the viewport to a minimum width

Problem: I have a page that looks terrible <480px and doesn't display enough relevant information to the user.
Attempted Solutions:
(ex. 320px screen) set the initial scale to 1.5, but then I need to set the scale accordingly for all the screen sizes between 320-480px.
(ex. 320px screen) set the width of your viewport to 480px, however this makes you need to scroll around the screen instead of zooming out like setting the scale would do.
Question: What it seems I need is a combination of the two solutions. One that will scale my viewport, but only until it shows a min-width such as 480px worth of content on the screen. Is this possible without javascript or is solution #1 what I would need to do?
Other considerations: Solution needs to work on all browsers/mobile (IE11+)
I'm not 100% sure what you are trying to do but if I understand correctly, you can set this in css. Setting the width to 100% will keep it flexible to your viewport window & setting a minimum width will not allow it it get any smaller than that.
html,body {
width: 100%;
min-width: 480px;
height: auto;
}
Have you attempted to use media queries ?
For example:
#media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}

Reduces image by width first, then after max-width, proportionally

I have a image that have 1200 x 200px. On center of this image I have a space with 500 x 200px that is the main content of full image. On each side of this image, I have an additional content. Note: it is on a single image.
If the window width is reduced, then first it should consumes the additional content of the image, but cutting it, keeping image height intact. But if I reduces the window width below of the main content width (in this time, all additional content was cutted off), then now the image should be resized proportionally, affecting the height.
My doubts:
Is possible do it only with CSS?
If not, there are some JS library to do that?
If not, how I should structure the HTML, CSS and JS to do it works?
It's an example banner with full width: Note that is have a main content and two sides with additional content.
This image below should help understand: I tried to simulate a window width resize, on 1200 px, 1000 px and 500 px (that not affect height yet) then by 350 px (that affect and resize image proportionally).
#banner {
background-image: url("http://i.stack.imgur.com/csRha.png");
width: 100%;
height: 200px;
background-repeat: no-repeat;
margin: 0 auto;
display: block;
border: 1px solid red;
}
#media all and (min-width: 1200px) {
#banner {
width: 1200px;
}
}
#media all and (max-width: 1200px) {
#banner {
background-position: 50% 0;
}
}
#media all and (max-width: 500px) {
#banner {
background-size: 240%;
}
}
<div id="banner"></div>
Is possible do it only with CSS?
Yes, and you only need 1 <div>. Treat the image as a background image, positioned dead center with background-position. Then resize the <div> using media queries, setting widths to the designated breakpoints.
You might use a simple media query like this:
#media max-width: 500px {
#your-image {
width: 100vw;
}
}
Use media queries for adding images/elements and changing css.
As for your problem use percentages for re-sizing images.
I suggest to look up progressive enhancement and Responsive design.
Also look up view-port in case you are not using it.
Don't use VW there is not enough support yet in IE,EDGE(no support for VMAX) and Opera mini, ie8 (no support at all).

to make buttons resizable according to screen sizes using jquery/javascript

I want to make my button controls resizable according to the screen sizes, like they should adjust themselves on other mobile devices as well(iPhones and iPads) .How is it possible?
Css3 has mediaqueries which allows you make screen specific styles. This is not very well supported in older IE's, that is why you always have to define an normal.
The cascading effect stays in affect, you do not need to redefine properties from normal in the mediaqueries (for example, background will be green in all scenarios)
/*normal*/
button{
width: 200px;
background: green;
}
#media only screen and (max-width: 600px) {
button{
width: 150px;
}
}
#media only screen and (max-width: 480px) {
button{
width: 100px;
}
}
This is called responsive design, the design responds to the widths. IE will do nothing, but if you are using Firefox and make the width of the browser smaller, it will hop automatically to the media styles
Well you gotta use media queries for that :
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Use percentage based sizes on your elements so that they scale automatically, or use media queries for specific window sizes, and set your element sizes accordingly.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
You can make them resizable by setting their width in percentage, so that they would resize according to the screen size,
.buttonclass
{
width:80%;
}
This should work..
if you want to use pixels, then make use of media queries according to various screens you need to support,
#media screen and (max-width: 480px) and (min-width: 320px) {
.buttonclass{
width:300px;
}
}

Categories