My question is about the best way to set elements sizes, should i set it in % or in px?
I'm doing a web app in my job, and i'm setting every height/width in percentage. Is this the best approach?
By best i mean correctly displaying on a variety of monitors sizes and resolution, and cross-browser.
Sample code:
html
{
height:100%;
}
body
{
height:100%;
}
div.title
{
background-color:Gray;
padding:0;
margin:0;
float:left;
width:100%;
}
form#ct101
{
height:100%;
}
And it goes on all the way down.
Thank you
It really depends on what you're trying to do. For example, for a content tag, I usually like using 80-95%. If I'm making a login screen, I would use 30-40% or a fixed width depending on how the rest of the page looks.
I know this question is old, but unanswered came up in an unrelated google search...
I would leave the height at 100% that is fine as long as the form is the only thing on the screen.. that will really be independent of your app. The width, on the other hand...
Using #media you can design your forms for mobile and for people on the desktop.
example:
#media screen and (max-width: 645px) {
form#ct101 {
width: 100%;
} }
#media screen and (min-width: 646px) {
form#ct101 {
width: 600px;
} }
That would make your forms fill up the screen on mobile devices so they have the max space to see them, and then keep them not so large on monitors so the form inputs aren't long. In theory the longer the form fields, the longer it is thought to fill out, and will experience fall off/bouncing from the form.
Related
First of all thanks to anyone who responds. I'm sure this is a no brainer for a CSS wizard but for me it's definitely not something I have experience with, hence the question.
On my website I've got all of a sudden a horizontal scroll appearing on mobile (which was NOT there before and no CSS was edited for that).
In addition to checking on my phone, I also check via an emulator# http://mobiletest.me/ (seems like it's there on tablets too). Does anyone know how to fix this?
Not sure if it's some WP plugin or theme working weirdly with the newer version of WP, but basically here's the CSS file's contents (it's pretty big).
https://justpaste.it/8v9yy (should be easily searchable & readable). I wanted to put it here but there's not enough space.
Thanks!
While there may be other issues causing that problem, such as elements extending beyond the body, you can solve the problem by hiding overflowing elements.
body, html {
overflow-x: hidden;
max-width: 100%;
}
Note: If elements within the page are overflowing they will be cut off. So, you must ensure that they are not overflowing by doing something like below:
.innner-element {
max-width: 100%; /* Ensures that it doesn't extend beyond its parent */
}
Update:
After looking through and testing out the CSS, it looks like the website behaves how you want it to when you make the following changes:
#media screen and (min-width: 320px) { /* do the same thing for (min-width: 480px) */
.typology-section {
/* this makes all the text fit in the view */
width: 80%;
/* the ad is wide, so this cuts it off at a certain point so no need to scroll */
overflow-x: hidden;
}
}
I found this out by using Firefox's dev tools to pick an element (ctrl+shift+c when you're in Inspect Element panel), namely the one going out of the view, clicking on it, and editing the CSS in that panel to find what was causing the problem.
Original Answer
I tried it out, and it looks like the ad at the top of the page is what's taking up a lot of horizontal room and forcing a horizontal scroll bar. Can you try and manipulate the ad with CSS? If so, I would do something like this:
#media screen and (min-width: 350px) { //350-400px is roughly the width of most phones
.advertisement {
max-width: 300px;
}
}
This makes it so that when the screen is a certain width, a max width is applied to the ad.
By the way, if you're using Chrome, you can see the mobile view by opening Inspect Element (ctrl + shift + i) and then toggling the device toolbar (ctrl + shift + m). Just wanted to throw that in there to ease the amount of work in checking the mobile view!
I am maaking a responsive app for all devices(sizes), I used the formula, target / context = result. For width i given 93.75% (900/960), when i used the same formula for height - 62.5% its not visible, If i used 600px for height that maincontent div is visible, how to fix this ?
Below is my code i tried,
<div class="maincontent"></div>
.maincontent{
width:93.75%;/*900/960*/
margin:5% 3.125%; /*30/960*/
height:62.5%;/*600*/
background:#2c3e50;
}
I think you're putting a lot more work into this than you need to, here's how I would set up your calculator:
http://jsfiddle.net/TTQ4e/1/
Working with percentages can get messy real quick - notice how the only percent I use is 100%.
You can make a div visible after a certain height by doing something like this
.myDiv {
display:none;
}
#media (max-height:600px) {
.myDiv {
display:block;
}
}
edit
Also, the only handheld resolutions you should really worry about are these:
320x480
480x320
360x640
640x360
768x1024
1024x768
800x1280
1280x800
I am trying to make my website work on different screen sizes, I am new in this area and could use some help.
What I am trying to accomplish: Making my website work on different screen sizes without sizing down the content. I have a website close to YouTube's layout and would like it to size down the same way YouTube has it. It simply get's less and less white space on the right and left to more the screen size goes down, Making the website look the same whatever screen size the user may have.
How could I accomplish this?
Put your entire content inside a container like <div id="wrapper"></div>
Then in your css:
#wrapper{
width:960px;
margin:0 auto;
}
Other than you have to start using media queries or adaptive design to create a responsive or fluid layout.
Best practise is to begin with the smallest resolution you want to address and build up from there.
But for the beginning it's best just to work with a fluid layout.
Simplified:
#wrap {
width:90%;
margin:20px auto;
max-width:960px;
}
Put this around your whole content and let content have a width of 100%.
Now you can start and build for smaller resolutions with the help of some media queries.
I'd suggest use just two, one for tablets and one for everything smaller than one.
#media screen and (max-width: 767px) {
/* ALL < TABLET */
}
#media screen and (min-width: 768px) and (max-width: 1024px) {
/* TABLET */
}
There are some great precoded template for responsive layouts but those can be a bit overwhelming in the beginning. If you want to try your hand with some I'd suggest the following:
http://twitter.github.io/bootstrap/
https://github.com/malarkey/320andup/
I'm still relatively new to css positioning, but have read a few books and watched a few tutorials. I made some palettes over at colourLovers, and wanted to see how they would look when applied to a website as a color scheme. So, using the little coding knowledge I had, I created a page to demonstrate my color scheme. After a while, it became a sort of self-confidence boost, and I've gotten just about done with it when a little thing caught my attention.
I have a two-column layout - on the left, there is the navigation menu, with a header above and a content section to the right, all in their own divs. My question is this - when I scale the page (as in, make the window for viewing it smaller), the content section gets pushed so it wraps under the Div. The way I could fix this was to make an additional div with no bg color and make it as long as the content that contained the navigation div, so they would line up, but it doesn't fix it if you resize the window.
I'm sure there's an easy fix to this, but my limited knowledge doesn't yet know it. If it helps, I've attached an image file below of what the site looks like in my editor (Coda). I also provide a link to the code of that page of my site which I've uploaded to textsnip. You can find it here - http://textsnip.com/f434fd. I have added comments to mark the header, sidebar, and content sections as well. Any help would be greatly appreciated. Thanks in advance!
The easiest solution is to use min-wdith on your container:
<div style="width: 90%; padding: 10px; margin:0 auto; min-width: 400px;">
This won't work on IE6, but will work on everything else. And, if you need IE6, then there are several workarounds that will solve it.
I would suggest you to use % value instead of px.
For example:
Header: 100%;
Nav: 20%;
Content: 80%;
Footer: 100%;
This way, if someone rize the window, it will always display perfect.
Use "float: right" on content DIV. And replace px width with %.
Check out this
You can use CSS Media Queries to adjust things as they get bigger and smaller. For instance, if you wrap your entire page with a div with an ID of wrapper (and use Simon Arnold's solution for the width of the individual elements), then you can do this:
#media (min-width:1200px) {
#wrapper {
width:1100px;
}
}
#media (max-width:1200px) {
#wrapper {
width:90%;
}
}
These set your wrapper to 90% if the screen size is less than 1200px, and 1100px if your screen is bigger than 1200px. Thus, if the browser is wider than 1200px then your page will stay the same size, and if it's smaller then it'll flow nicely.
#media (max-width:700px) {
#wrapper {
width:100%;
}
}
That one makes it wider when the browser gets smaller, and
#media (max-width:400px) {
#wrapper {
width:400px;
}
}
that one sets it to a fixed width when the browser gets really small. Those are really simple queries, if you're interested in learning more about media queries then here's a good place: http://css-tricks.com/6731-css-media-queries/
And of course, it wouldn't hurt to make the page flow between those transitions using CSS3 Transitions.
IE8 and below, unfortunately, do not support media queries. BUT you could read their browser type with PHP instead, and direct them to get a decent browser... It'd help make the web better. ;)
is there a way to have text resize as the browser gets smaller for liquid based design in percentages.
images divs etc, all rescale but text percentage scaling its not possible! setting it in percentages just changes the unified em setting for that text - in every browser width identicaly.
Other than using media queries at specific intervals, I'm not really sure.
The way I would do it:
.content {
font-size:16px;
}
#media all and (max-width: 800px) {
.content {font-size:14px;}
}
#media all and (max-width: 600px) {
.content {font-size:12px;}
}
#media all and (max-width: 400px) {
.content {font-size:10px;}
}
No javascript, pure CSS.
I believe this is exactly what you were looking for:
http://css-tricks.com/viewport-sized-typography/
Yes, it is possible to resize text by handling the onResize event with JavaScript code. There are quite a few issues with onResize, though, including debouncing, which can get complicated.
I know this isn't part of your question, but I wonder if it's a good idea to resize text. After all, the user has already told the browser s/he's happy with the text at its current size. Is it really all that friendly to override the user's manifest preference?