I have a webpage where all items on the page are inside a container but I would like to make everything smaller by 25%. I have tried:
Container.CSS
.container{
transform: scale(0.75);
}
But this technique shrinks the entire page making it about 2 inches offset from the top of the screen, and also makes all the items on the page blurry.
Question. Does anyone know a quick and easy way to do what I want to do, or will I have to individually make every item in the CSS 25% smaller?
Thanks
Since you haven't uploaded any code for us to edit, all I can say is that I would give the main page container or body a width of 75%, and then make every element inside have percentual widths, so they stay responsive.
But as you noted the transform: scale(0.75); solution, I conclude you also want the font, borders, etc to shrink. Your best solution is to convert the px values to em values (generally speaking 16px = 1em) for those things, and then change the body's font-size to 75%, shrinking everything in the page, because 1em has then become 12px.
Might take some time, but when you're done, your whole page has been made dynamic
Hope this helps
If responsive design so easy, all non-mobile friendly sites could be fixed in 1 minute. But it's not that way I'm afraid.
The individual items would need to have percentage widths on them. Using max-width with percentage widths is good too. For example you would have your main container set at 75% and a max-width of whatever the maximum your graphics can take inside. If your items inside have % widths then the one at 25% will always be 25% of whatever size the container is.
Related
So the subject is a bit lengthy. Anyway, what I'm basically doing is trying to get a unit be a specific height (366px to be exact), but I want that height to scale DOWN if the resolution drops, thus the "min-height: 366px" is naturally out because of that.
I did come up with a rather crummy solution where I inserted an image that's that height, but the image itself is 366 pixels tall and 100% transparent. That was the only way I could really get the container be the right height.
I need this height because the container will then contain more images within it that scale. These images are absolutely positioned within the container and are on top of my invisible image.
So is there any way to have a "min-width" that then scales as size goes down or am I out of luck?
Thanks a lot.
Em.... what about max-width 366px? that should work and.. did You use (it is probably not same as this)
I'm trying to make my menu always be 100% width of the html/body's width, no matter what.
I thought it was working until I lowered my screen size and noticed the child div #menu was scaling while the parent #top wasn't. When I got them both to scale with each other on smaller screens they don't want to go 100% width when menu is smaller then screen size.
This is driving me insane, tried so many different ways with float, display inline-block, positioning etc. But cant get both ways to scale the way I want it too.
https://jsfiddle.net/pLt418pc/
For what you are using float:left ?
Here you go. Guess i correctly understand your question
jsfiddle
I am trying to fix the web layout of my web page such that it does not resize or rearrange .
for example , check the page at http://www.boutell.com/newfaq/creating/fixedwidthlayout.html
. On my browser(chrome), when i resize the window along x-axis, the text rearranges to accomodate within viewable area.
On the other hand, http://msdn.microsoft.com/en-us/library/ie/dn255008(v=vs.85).aspx
when i resize the window along x-axis, the text does not rearrange to accomodate itself. I need my web page to NOT rearrange as in the latter case. Not able to isolate the attribute which controls this. I tried position:absolute in the body tag. No luck
You have a fluid layout. All your columns have their width set in percents. So, when the browser size changes, the columns's width changes too. Lets say one of your container has a width of 15%. When the browser window width is 2000px, this container's size will be counted as 15% from 2000px = 300px; on the other device, where width is 1200px, it will be 180px.
The fastest way to fix it to change width to px;
Another way is to set min-width property, - then the container can
act as a fluid, but at some point it won't go smaller. For example:
.columnt {
width: 15%;
min-width: 200px;
}
Hope you get the idea.
I am trying to change my navigation bar's position from the top of the screen based on the screen width. I tried in CSS: top: 10%, but this is based on the height of the screen not the width.
Is there a way to get top: .1 * width?
Quite often overlooked is that the vertical margin percentage properties of elements refer to their containing block's width, not just the horizontal ones.
That means that if you set something to margin-top:10%;, it will have a top margin equivalent to 10% of it's containing block's width.
You can easily see that in this jsFiddle. Try resizing the output panel vertically and horizontally, and note which resize direction makes the inner block move up and down.
You can use vw and vh and if your browser targets are allowing, I'd recommend that. But if you can't use them, you don't have to use Javascript right away. Too many people gun right away for Javascript when it opens up a whole new can of worms (like, what if the browser resizes?), especially when a bit of creative use of CSS can get you out of a sticky spot anyway.
I was going to say there is no way to do so, but apparently in CSS3 since 2011 you have vw/vh that allow sizes to be relative to the viewport. For example:
img { height: 95vw; }
should give images a height that is 95% of the viewport width. Read more; apparently only IE9 supported it at the time of writing.
Open this page : http://jsfiddle.net/dwDZx/6/
Resize until red
Continue make the browser smaller
<div id="container">
<div id="div1"><div class="content">one</div></div>
<div id="div2"><div class="content">two</div></div>
Why does div2 jump down a row instead of resizing? How can I solve this?
You are adding margins for the smaller screen size. Set the margins to a percentage and subtract the percentage of the width for the smaller screen size.
So do not set a margin in pixels. but in percentages.
Updated your code at //jsfiddle.net/dwDZx/9/
When the divs are red, there are two relevant constraints that the divs try to follow: width: 48% and margin-right: 10px. If the div is jumping down a row instead of resizing, that means there isn’t enough space for both of them on that row – they are trying to take up more space than is available. Thus, the second div makes a new row for itself so both divs can be as wide as they want. So let’s look at the numbers and see why the divs are asking for too much space.
Load http://jsfiddle.net/roryokane/kZZCh/, which dynamically displays the width of the page and each div, and make the Result panel exactly 400px wide, so the bug shows itself. Now the two divs are 192px wide. That makes sense – 48% of 400px is 192px. The width does not include the margin, which is 10px for each div. So the total width the divs are asking for is (192+10)*2 = (202)*2 = 404 pixels, which is more than the 400px allotted to them. No wonder the divs are wrapping instead of staying on the same row.
So how do you solve this? Dany’s answer suggests changing the margin-right value from a pixel value to a percent value. But that is only one possible solution. Finding the best solution depends on why you chose the two specific numbers in width: 48% and margin-right: 10px, and which number is more important to keep. If you need the width to remain at 48%, consider whether you want to keep a fixed margin width or switch to a flexible margin width. If you you still want a fixed width, use margin-right: 8px. If you want a flexible width, use margin-right: 2% (Dany’s solution). On the other hand, if you need the right margin width to remain at 10px, then for the width, use width: 47.5%. All of these values ensure that even when the page is only 400px wide, the divs stay on the same row.