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.
Related
I've been searching in other questions since this is a pretty common problem but none of them applied to my case.
I'm developing a small web app with React, just to get the basics, and the background img works fine in mobile view (there's a media query that changes it at 480px to a portrait one) it resizes from 480px to 320 and looks good.
The problem is that, at certain heights if you stretch or wide the window the background gets stucked in the middle of it (if you recharge the page it appears as it should, being the window in the same exact place as where the problem occurs).
The img is loaded through CSS in the html, If I remove the background-size property it works as expected in desktop and mobile, but when I cross the 1260px width it doesnt cover the full width.
I have this codesandbox with all my code: https://codesandbox.io/s/stoic-brahmagupta-ro2kb?file=/src/style.css
And I attach an image of the problem. Thanks in advance.
As u r testing this you can see the content of the App is overflowing the html element
I rather use min-height on global elements like body or html than static height to prevent such as cases.
So to fix it you just simply add
html {
height: auto;
min-height: 100vh;
To prevent not overflowing instead of scaling we just add min-height equaly of 100vh (viewport height).
I think it will propably do the job without height: auto; but i like add it to prevent even more edge casing
I am currently facing an issue with browser resizing. When the page is at full size (i.e. the browser window is not being minimised), the page works well, yielding this:
However, when I minimise the window, making it smaller by compressing it vertically, this happens:
The content is cut off, and I cannot scroll to view the full content in the resized browser window.
I understand that this is a common issue. I have tried to resolve this by ensuring that:
any widths are in terms of % (and indeed, everything scales well
with respect to the width)
heights are auto (so that they wrap the necessary content)
When that did not work out, I replaced the height values with % values instead of simply using auto, making sure that the total height values did not exceed 100%. Unfortunately, that did not work out either. Any idea why, and what I can do to make this work? Thanks in advance!
My HTML and CSS can be found here: https://codepen.io/anon/pen/yoBEWb
try changing height: 100vh; with min-height: 100vh;
You can use Media queries to resize properly your screen and adapt your content. Basically a media query is something like a rule saying for example : if my screen height is less or equal to 480px then please reduce the font-size, place it below...More info here.
Demo
I want to make responsiveness behaviour like at this site.
There is meta viewport content set to width=device-width, initial-scale=1, maximum-scale=1, but if i resize browser vieport size by reducing its width (about 200px width and smaller), content scales proportionally and responsiveness "swithes off".
You can compare this site and jsFiddle demo with picture below. The same text with the same font-size, but scales differently.
UPD
I need to know how can i set 20px font size and it will scale proportionally like without using meta viewport. Try to make a <h1> with meta viewport and without one, you will understand what i mean
Your question is unclear, but assuming you're talking about the fact that on your demo, the content is blocking its resize after a certain minimum width:
It is important to understand the function of the meta viewport.
The viewport is the user's visible area of a web page.
The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.
-Source
This function prevents a user to zoom in or out on your website. The code you give us says that the width of your webpage must be the width of the parent viewport (equal to your browser's viewable area), that the initial zoom has to be 1 (that means no initial zoom is set) and that the maximum scale can be 1 (that means no zooming in allowed).
The fact that your website is responsive until a certain minimum width hasn't any direct link to the meta viewport.
The responsiveness of a website is based on what's called breakpoints in CSS. This gives certain CSS rules based on the viewport properties (in responsive cases: if the screen's width is between a certain minimum amount of px and a maximum amount). According to what I can understand, you actually need to set the CSS min-width attribute to your website's body like this:
body {
min-width: 300px; /*You'll have to set the value you wish here*/
}
The next thing you have to do is choose how you will handle screens smaller than 300px. There are two options after this:
You can choose to force-give your webpage the device's width and prevent horizontal scrolling but this will hide all the overflow. I personally suggest not to use this technique. For doing this, you'll need to hide all html's overflow with this CSS: html {max-width: 100vw; overflow-X: hidden;}.
The other (better) option is to give your webpage the minimum required width. This will allow horizontal scrolling and a better user experience. To do so, use this CSS code: html {min-width: 300px; overflow-X: visible;} (remember to replace 300px with your desired minimum width).
This should be all for now. Remember that there are hundreds of guides for responsive web design available. Hope your issue is solved.
The solution was simple. I needed just set body min-width
On a number of good websites, I see that the page loads so that the content is the same width as the browser.
Specifically on iPad: If you rotate the screen after page load, and zoom out, the content seems to resize in width to match the screen width again.
What is the "trick" to achieve this? I don't want to use the "width:100%" technique, because I would still like the page to be able to "zoom in", where you then you have to pan/scroll to see the rest of the content.
Sites like what you are describing are NOT using fixed widths, so setting a width on your elements will not let them to fill the entire screen.
If you want to create flexible and fluid layouts, you DON'T want to do this in your CSS:
.yourcontent {
width: 55px;
}
You would want to create your elements with percentage based layouts, or viewport based layouts.
You can play around all day trying to get a fixed width to look just right, but if you change your browser, you of course don't get any responsiveness.
Using something like:
.yourcontent {
width: 50%;
}
will set to only use 50% of the screen width, no matter the browser sizing.
Using VH and VW (viewport height, viewport width) are preferable to using the fixed widths. Fixed widths can be changed depending on screen sizes using media queries, but this is essentially a waste of time and bootstrap will take care of (most) media queries for you.
example:
.yourcontent {
width: 50vw;
}
Check out the bootstrap documentation of the CSS to see how this is achieved: http://getbootstrap.com/css/
You can still zoom in using a library like bootstrap.
I found a solution to my problem. I know its probably not A+ practice, but it seems to work. I basically use fixed widths for elements in the roughly "desktop/tablet" size mode, but I set the width using jquery on (page load/screen rotate), like this: $("myselector").width(newSizeWidth); where the width is based on:
$(window).width();
However, I do use % layouts for roughly smartphone screen sizes, in the same webpage. I conditionally .show() the smartphone div's (that use % layouts), and then I hide the "desktop/tablet" div's (that use fixed sizes).
I use the following in the Head portion for mobile devices:
meta name="viewport" content="width=device-width, initial-scale=1"
BUT
For smartphones with smaller screen sizes, where I don't want zoom function, I change it in the document ready function with:
viewportmeta.content = 'width=device-width, initial-scale=1,user-scalable=no';
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.