I am building my web application on my laptop but when I navigate the page on my desktop pc the layout of the div are distorted.
I think the solution is giving percentage instead of absolute numbers like 240px to height and width of divs.
What do you think ?
Do you have another recommendations ?
Thanks in advance.
What I've done is :
<div style="height:240px;width:240px"></div>
What I think I have to do is :
<div style="height:100%;width:90%"></div>
When using relative sizing 'px' rather than absolute 'pt', the browser approximates the size which can alter your layout depending on user settings for 'zoom' or text-size' levels, browser version etc.
If you absolutely size the layout div using points (pt), you should not see changes based on browser, screen resolution etc.
Try
<div style="height:240pt;width:240pt"></div>
Great reference on relative vs absolute font management here
What do you mean by "distorted"? Did it get wrapped to the next line? That's the only way I can see there being any distortion.
If you want to keep fixed widths, you simply have to wrap something else around it that will enforce a width. For example, if you wanted 2 divs side-by-side:
<div style="width: 800px">
<div style="width: 300px; float: left;"></div>
<div style="width: 500px; float: left;"></div>
</div>
Since the outer element is 800px, and the inner elements don't exceed that, if the screen is smaller than 800px it will just have a horizontal scroll bar, and your divs should still happily be next to one another. Note that if you have anything like borders or padding set on any of the divs, that will add to the width (and height) of the element, so take that into account.
Related
I want a page with a fixed pixel size to always have the same percantage hight. I cant just use % or any other relative units since I already made the whole site in pixels.
Means when I have a div with a hight of 1500px and view it on a 1366x768 screen the whole 1500px div should still be visable completely.
The effect I want to accomplish is something similar to a browser zoom.
You could try min-height: 1500px; on the div, then put overflow-y: auto on the body or html elements.
If you want something to dynamically resize depending on the window height you'll want to look into either CSS flexbox, using the vh sizing, or using javascript to detect window resizing.
You could use the viewport meta tag for that. Just remove the "initial-scale=1" part and the page should always be rendered to fit the screen.
You should note that this might result in the page being shown very small which can lead to problems when people want to access it with a smartphone for example. If you want to optimize your page for different devices and screens, I suggest you make yourself familiar with responsive webdesign.
Something like height: 100vh; would make the object's height 100 percent of the viewport height. It seems like there is no way around switching from px to something else.
I’m making my first full responsive site and I have run into an issue. The site seems to be working as intended in firefox and explorer. The browsers that are giving me issues are chrome and safari.
On the bio/landing page (http://designerdsite.com/new/) toward the bottom of the page are two sections one titled “I Got Skills”, the other titled “and they love me for them”. When I load the page (no matter what size the browser width is) it loads correctly however after the browser width is shrunk and then reopened the layout repositions. In the “skills” section the div on the right side is falling below the div on the left. In the setion “they love me” the text is falling below the pictures. It seems for some reason the width on the container div is not being understood. Perhaps its something else. I am really not sure what is going on here and would very much appreciate any advice anyone has. Thank you!!
I discovered a similiar issue on my site. As far as I could figure this out, it seems that Chrome/ Webkit has a problem with the correct (re-)positioning of floated elements.
So there are 2 (maybe more) options:
1. You may use Javascript to force the Browser to re-render (not reload!!!) these elements (e.g. by changing the display property to none and back to block)
2. Use another positioning variant like 'inline-block' or 'table-cell'
Why don't you use twitter bootstrap that will make your life really easy.
it seems like you used media-query for your site right???...anyway so iguess you know the reason....for example lets assume your last media-query max width was defined as 600px ...then it will work fine upto 600px and below(not far)....when your browser is resized to width:480px (for ex.) then your design like font-size,padding etc are getting very large to fit two divs side by side....so if you want to keep your design intact for microscopic width then lets have one more media query definig that limit max-width:480px;
for example
.fonts{
font-size:18px;
}
#media screen and (max-width:480px){
.fonts{
font-size:10px;
}
}
Seems like an issue with all the percentage widths. I know WebKit can have issues with nested and rounded percentages etc, so when the page is resized both the widths on the images and quotes, as well as padding on the parent element are recalculated.
You'll see if you remove the padding: 0 5% on the max-width class, the problem no longer occurs.
Try wrapping the quotes in a 100% width div:
<div class="quote-wrapper" style="width: 100%;">
<div class="reference clear-both">
<img src="images/monica.jpg" alt="Monica" class="reference-pic">
</div>
<div class="quote">
<p><em>“Paul is the most committed hard working person I've had the pleasure to supervise. If he was unfamiliar with something he did the research to inform himself and others. Paul is one of those rare breed of people who comes to a supervisor with options not just problems.”</em></p>
<p>Monica Luchak, Former Director of Creative Services, BoardSource</p>
</div>
</div>
It has to do with how browsers compute percentages. A quick fix for that is to set a max-width for the left container:
#skills-left {
float: right;
width: 47%;
max-width:411px;
}
I am currently making a single page scrolling vertical site which has the viewport locked at 100% height.
The problem I have is that the designs that were given to me were calculated for a 1200x800 (macbook 13") view but I am using 1920x1080 (macmini) resolution.
Furthermore, the usable height area in each screen is limited by each widget that the browser uses so the 800 might actually be for example 638 height (it is more profound in the ipads where 768 browser height in total is not 768 at all). Also, the design must be centered in width and height. For width, I can use margin:0 auto, but height is trickier because it would need to make a div absolute.
What I did so far was to make a div absolute and have it manipulated by javascript, but I would like to know if there is a pure css way to do it since javascript would require much cases and excess code.
this is what i'm using with body height and html height at 100%
<div style=" display:table;width:100%;height:100%">
<div style="display:table-cell;vertical-align:middle;">
</div>
</div>
I know a lot of people ask questions on this, but I have a spacing problem with my divs.
My main div tag of my web page is 1024px. The problem is that on smaller screens part of my
page gets cut off and you have to scroll horizontally. How do I fix that so that the page will
fit in any window? (especially the smaller ones)
I do not want to use the width:100% property cause I already defined the width as 1024px.
Here is my main div tag's properties:
<div id="main" style=" margin: 0 auto; padding-top: 50px; width:1024px;">
my content.....
</div>
A more common width for a Web page is 960px just to avoid the problem you are encountering. Sorry, the only way to fit your page into those smaller screens is to reduce the width for your main div.
If you are using a fixed width, in this case 1024px, you cannot make the page fit in any window.
You should have a read of Responsive Web Design which explains how to incorporate flexibility into your design.
I'm assuming you don't want it wider than 1024px? If so, set the max-width property on it:
#main {
max-width: 1024px;
}
then, it will fit the screen, but not go larger than 1024.
I have an image that, depending on the screen resolution, drops down out of sight in my CSS flow layout because I have set its width and height to static values.
Is there a way in a CSS flow layout to have the image automatically resize while someone is making the browser window smaller. I have seen this done in a html-table layout and I assume the tables make it possible there - is there a way to also do this in a CSS flow layout?
A quick test shows that this:
<img class="test" src="testimage.jpg" />
combined with:
img.test { width: 50%; }
Resizes the way you probably want. The image dutifully resized to 50% the width of the box containing it, as well as resizing vertically, maintaining the aspect ratio.
As for resizing based on vertical changes, it doesn't work the way you would like, at least not consistently. I tried:
img.test { height: 50%; }
In current Google Chrome (2.0.172), it resizes somewhat inconsitently; the sizing is correct but does not update after every window drag. In current Firefox (3.5), the height seems to be ignored completely. I don't have any remotely recent IE, Safari, etc to test. Feel free to edit in those results. Even if those do well its still probably something you want to avoid, and stick with width.
EDIT:
For this to work, all the elements containing img.test need to be sized with percentages, not statically.
Think of it this way:
body is 100% of window size.
img is 50% of body.
img is 50% of window size.
Now suppose I add a div. like this...
<div class="imgbox" style="width: 100px;">
<img class="test" src="testimage.jpg" />
</div>
Then
body is 100% of window size.
div is 100px, ignoring body width.
img is 50% of div.
img is 50px, regardless of window size.
If the div has "width: 100%" though, then the logic works out the same as before. As long as its some percentage, and not fixed, you can play with the percentage on the img and make it work out the size you want.
bit of a guess since my css is rubbish, but since nobody is answering, what about setting a % width or height or both in the image so that it is a percent of its parent. dunno?
Try setting max-width to something like 95%. Thank way the image will shrink when the container width is less then the width of the image. All of the parent containers would need to adju
max-width:95%;