I started to work with bottstrap. And the amazing thing about that thing - its giving the ability to control the width of blocks on the screen - to fit to any size of device as comfortable as can.
The code that alowed to help me with the width is:
class = 'col-md-2'
My question is -
There is any way to do that exactly thing just with height of blocks? because when i make a site - the widht is suitable in any device (again,, because col-md...)
but the height is different. and i dont want that.
you can use row-eq-height and you can check the documentation here http://getbootstrap.com.vn/examples/equal-height-columns/
Related
I have been working on this website and it is almost over.. until I discovered my computer is on a high resolution (1920 x 1080px).
I tested my website in 1024x768px and it was... not what I expected.
Anyway I searched far and wide around the web and there are still questions that I did not find answers to, so I am here to ask you , hoping to find an answer !
First of all, what I want about my website, is to be comfortable to any screen resolution on computer, from 1024 to 1920.
Also, I want it to be comfortable when you reduce the window (you know, like when you make a webpage only cover half the screen).
( English is not my mother tongue so I hope it will still be understandable for you guys.. )
1- I began using px. That does not work on lower resolutions, users have to unzoom. So now I am using % as advised on the web. But now when I reduce my window on the left of my screen, it adapts too, but too much.. I want it to make a horizontal scrollbar appear when you reduce the window too much.
SO basically that is my question, what should I do ? I find many websites that work fine (like this one, if you reduce the window a horizontal scrollbar appear !)
Maybe combining px and % ? I don't know, I really have no idea what to do.
2- Is the resolution of the screen comparable to the size of the window on a screen ? For example, my resolution is : 1920x1080px
If I put my window on the half left of my screen, will be equivalent to a resolution of 1920x5040 px ?
3- For phones and tablets, is it just a question of smaller resolutions ? Or is there something more ?
Thank you so much for helping me on this one !
Cheers,
Bill
First of all, you need to have a container of all your element. Every percentage value is based on it's container. And for scrollbar, may there in your site container have CSS overflow: hidden, so you need to remove it or change it to overflow: auto
I think you meant the content will be shrink horizontally and expand vertically. This is because you don't have any container to wrap each element with percentage width. So you need to have it and set min-width of that container.
For touch device, your site will zoomed out based on how big is your container.
This is not a simple question to answer. What you want to do is stop thinking in terms of pixels. Read about responsive design. Read about the elastic nature of HTML, and its ability to reflow your document. Read about media queries.
Basically, from a starting point, DON'T specify explicit widths for anything unless it is necessary. s and s automatically stretch to your full screen width, regardless of resolution.
You have quite a bit of a learning curve ahead of you, I'm afraid. Good luck and read lots.
I am designing html/css interface for a 1920x1080 touchscreen. It will always be that resolution, never changing. Should I set width and height to those dimensions and code from there, or should I code in percents at whatever size resolution I'm at and then allow it to adjust to a bigger screen? I am looking for the solution what poses the least roadblocks.
Never assume that anything will always be the same resolution. Regardless of what you're coding for now, there will be next generation devices, and they will be different. So unless your project has a very short lifetime (maybe a temporary web site), my recommendation is to code to current standards. Also, in my experience, coding in ems and percentages is usually faster than coding in individual pixels of a project. If your touchscreen is 1920x1080, and you set a body width of 100%, there is functionally no difference between that value, and setting the body width to 1920px. However, using the percentage approach, you retain more flexibility should the device resolution or browser behavior change.
The best solution (atleast for me) has been described by you as the usage of percentage values.
So if you use percentage values then the code will take care of its content's size in any screen size. But you might want to use this:
#media only screen and (max-width: 1900) {
// css properties here..
}
But the media query will take alot of code lines to make the site able to render itself. So that is why using % is my preference.
Can somebody please tell me the best way to deal with different window sizes and with a user resizing the window when creating a webpage.
Because I always find myself creating layouts with html, css, etc. and at first everything look perfect. But as soon as I increase or decrease the size of the browser window everything falls apart.
Also it would be great if anybody could point me to some sort of guide or anything similar.
Thanks it advance! Any help is greatly appreciated!
For detection, you may want to use css media queries (in which case you may want to to use https://github.com/scottjehl/Respond Respond.js's shim for older browsers, to add fuller cross browser support), and target certain screen widths. http://html5boilerplate.com and it's default css: http://html5boilerplate.com/css/style.css has a great default css set for exactly that type of media query.
Another approach is to give a fixed minimum and maximum widths to the outer container of the page. For example:
body{text-align:center;}
#outer-container{text-align:left;margin:0 auto 0; width:98%;max-width:900px;min-width:760px;}
that way you can grow and shrink it and see how it looks within a certain range and know that other viewing windows are going to see that plus a horizontal scroll bar at worst for small viewing.
In general, just using the html5boilerplate as a starting base is a great approach, it's an excellent piece of work.
I am new to css.
I wanted to know which is the best standard technique to keep the page intact even when the browser size changes, the page is zoomed in or is used for any other screen size. I have tried centering my layout using a container but it gets disturbed when the page zooms in (i know it will, but all what I want is that the elements don't go out of the screen and if possible stay in almost the same position).
So what is the best and easy standard technique in css to achieve the
Thanks for your help.
The newest, cutting-edge method is called responsive web design. It's a bit complicated, but it's looking like the way to develop for multiple screen sizes. It is especially useful for small websites.
Check out some examples here: http://mediaqueri.es/
And some more in-depth information here: http://www.alistapart.com/articles/responsive-web-design/
If you set a set size for your body element anytime the browser is re-sized nothing within the page will change.
So the CSS you want to add is as follows:
body {
width: 960px; //being the size screen you want to accommodate your site to
}
Also this may help you: Commonly used pixel sizes for webpages and their pros/cons .
I am developing a flash based website using mxml. My monitor's resolution is 1280x768 and is widescreen. The problem is while it appears properly in my screen it doesn't appear properly in others. Which is the best approach to solve the problem ?
I have 2 in mind.
Let scrollbars take care of it : If the screen is 14 inch screen with
800x600 resolution it appears zoomed
in. So thats a problem
Get screen resolution and resize using scaleX and scaleY : The graphic
components will get resized but fonts
give problem.
Which is the best approach among these ? If there is a better approach please mention.
Thanks
The BEST approach for this is to create a fluent UI based on percentage and constraints.
This way, the UI will feel the same on all computers not just yours.
I would recommend to also use the flow container that comes as a part of flexLib because that way is the easiest to create a fluent design.
Not long ago I created an application for a forex company that was perfectly fit to all screens larger then 1280X800 (design definition).
It's not that hard to do once you get the hang of it.
Good luck.
You can add an event listener to the stage to this effect:
this.stage.addEventListener(Event.RESIZE, resizeHandler);
private function resizeHandler(e:Event):void {
var newWidth:Number = this.stage.stageWidth;
var newHeight:Number = this.stage.stageHeight;
// etc, roll from here to do your manual positioning logic.
}
Note that this should also work on any DisplayObject - so you can use constraints and percentages on your containers, but then intercept their auto-resizing with a setup like this which will let you fine-tune the appearance of their contents.
Personally I would develop the screen for 800x600 and then dynamically resize the screen for higher resolutions.
You can use vertical scrollbars but horizontal scrolling is a big no-no in my books. It takes away from the whole experience of your site and gets rather irritating.