I am going to develop a web page for Mobile. I need to resize window element with width of screen.Suppose I create a form with some text fields. It display fit when width of screen is wide. But if screen has long hight and less width then form element (text box,label etc) are overlapped or hide with few corner part.
How I can do like this if I resize screen to smaller then displaying HTML element should be smaller automatically to fit with screen size.
Please give your suggestions.
Thanks,
Deepak
The best solution is to use media queries
With them you can apply separate styles for different device widths and make sure that all your pages(and forms) look pretty on every screen.
That will also help to avoid distortion of the page or making the text unreadable small, which might occur when you'll try to squeeze a page designed for a wider screen to a narrow mobile device.
I suggest you to use Percent dimensions and box-sizing: border-box;
Related
I am working on an ASP.NET MVC application which uses Bootstrap for layout of the views. The main browser that we support is IE 10+. I have a few data fields that I am using multiline Textareas for. I am trying to achieve a simple behavior; I want to give a certain maximum width for the Textareas (say 700px, even if window is wider), but have the width reduce down for small window sizes.
I set up a special class in my Site.css file for them. But it seems like the only way that I can get the Textareas to use the full 700px width is to use the CSS width property. But when using width, the width does not reduce for narrower window sizes. If I use max-width, the initial size is smaller even for large windows. Isn't there any way to achive my desired effect?
I ended up using width with a percentage of 70% (rather than 700px). That gave me the size I wanted with larger screens. Then, I put in a min-width value of 300px to give me (close to) 100% on smaller screens.
Thank you for taking the time for this.
I want to achieve:
Fill the whole window with divs that should be squares.
There must be 20 squares per row.
I want to append them using jQuery when the page loads.
I want them to be responsive, for now I'm not taking into account mobile devices, where the screen goes from landscape to portrait. Onyl different widths of desktop devices.
Each one of them has a differenet color, so my javascript is a loop that .append() each different div to an HTML container.
This is the code inside the append:
"<div class='square' style='background-color:" + color + "; width:5%; height:????;'></div>"
I was hoping that the auto height would keep the square ratio, but it does not.
I could use jQuery to get the size on pixels of the div once it's appended, and then use that to set the height, but that approach makes me doubtful about responsiveness, as every time the window is resized I would have to do the same.
Any thoughts or ideas on how to accomplish this?
Thank you!
You can use this padding-bottom trick to create a div with matching dimensions that is responsive.
Demo
i am sorry to disturb you all, but i want to understand how a certain margin responsiveness works.
As you can see on this site http://www.trade-ideas.com/about-us/ the navbar, the paragraphs, the h1, h2 and the footer maintain the same left-margin as you resize the browser window (with firefox the effect it's more clear).
It's like when the elements reach the limit of the left margin (that is mean zero), they restart just on the same distance (the same margin-left) that they where before i was starting resize my browser width.
I've noticed that the navbar included in bootstrap also has this left margin responsiveness: as i resize in width my browser's window, the navbar continue to stay in the same left-margin range, restarting every time he reach the zero margin-left.
In fact, on this bootstrap page you can find the exact same effect in all the page's elements (the navbar and the div box on the body) : http://getbootstrap.com/examples/navbar/
With firebug i've tried to search what parameter set this particular effect, but i'm not an expert, and i didn't find a solution.
So, my question is: this left-margin responsiveness it's generated by a set of #media queries instructions to a set of width? Or there is something that i'm missing?
Thank you in advance for all the help that you'll give me.
Andrew
p.s.: i noticed that on http://getbootstrap.com/examples/navbar/ if i delete "margin-left:auto; margin-right:auto;" the effect that i need doesn't show up anymore.
I tried to create a div container with that margin auto on my site, but i was not able to ricreate the effect (maybe that "margin-left-right:auto" it's just a part of the effect).
The media queries are the ones that make sure the website is responsive. The example: http://getbootstrap.com/examples/navbar/ is using media queries to set the width of the container. If you set the media queries to change when the screen width is 700px and when you make the width of the screen smaller. The media queries will register the px of the screen and when the width of the screen is equal 700px the container will change.
I am having a difficult time figuring out why a div is being pushed down and out of another div.
If you go to the following link
http://www.chrismazzochi.com/index.php?subject=6
This page contains a contact form, and if you scale down to the 480px landscape or 320px portrait size viewport dimension, or view this site on an iPhone, you will see that there is a bit of a gap between the label and the input. If you use Firebug you will be able to see that the label and input in question is .styled_label and .styled_input respectively.
First I have used negative top margins to align the inputs because they were being pushed down and out of the .form_fields container. I don't want to do this. And I also can't get these input fields to budge over to the left.
Can anyone help?
I'd appreciate it.
Thanks,
Chris
I think this will help you. change the mazzo_style.css in line number 1005.
Change margin-right:1%; to margin-right:21.9592%
I've just spent the last few weeks learning how to properly design a layout. I basically thought I had everything perfect with my website layout and was ready to go about transferring the coding to Wordpress... and then I accidentally resized my web browser and discovered that all of my div layers were overlapping each other.
Here's what it looks like:
Basically it looks as though it's mainly my center content div that is being squeezed out, as well as my header image and navigation witch are in the same top div. My footer is also squeezed down as well. I've searched the internet for a solution to this problem and can't seem to find a thing.
How do I fix it so that my divs stay in place when the browser is resized?
as Walter said your CSS would be helpful. But, the main problem is that the content in the div is overflowing to other divs because the the content's div cannot contain all the content.
In your css, try setting the div's overflow property to either auto (shows scrolls bars) or hidden (to just hide the content if it goes outside's the div)
e.g.
overflow:auto;
or
overflow:hidden;
Express your widths and font-sizes in ems.
Here's a good calculator:
http://riddle.pl/emcalc/
Percentages will work, too.
Check the css in stackoverflow, and try resizing the zoom level in your browser here - you'll see everything resizes nicely at any zoom level.
I figured it out. Turns out that the width of my center content margin was dictated by margins instead of just a direct width (ie. 500px). So whenever the page was resized, the margins on the sides of the browser tried to stay as they were, thus making the entire column smaller. I just had to get rid of the margins and specify where I wanted the column to sit on the page and just justify a width for it.
you can also try the min-width. i am assuming the center div is fluid and sidebars are fixed-width.
Can you post some of your CSS?
The simplest way is to give all of your columns relatively sane width settings so that the size of the browser window doesn't affect the size of your layout. Getting fluid-width column(s) to behave is more complex and depends more on the specifics of your layout.
Check out the min-width property. Another option is applying another stylesheet when the viewport width is below x pixels with CSS3 Media Queries like so:
#media all and (max-width: 30em) {
/* Alternative narrow styles */
}
or so:
<link media="all and (max-width: 30em)"
rel="stylesheet" href="narrow.css" />
CSS3 Media Queries are still not widely supported, so you might want to look into a solution that applies the "narrow" style sheet with JavaScript through the window.onresize event. I'd recommend jQuery for such a solution.
I Had the same problem if you have a width and height in your DIV Container it wont change except the width unless you put a min-width. The problem I had was when I would make the browser window the divs would like go to the next line
so what I did was in the container I set a height and width. Before I didn't set a height I let the divs determine the heights.