How would I set the minimum width of a webpage?
I thought it would be easy, turns out not...
I want to make it so that, for example, when the screen width is smaller than, say, 1000px, the content to be shown at the size as if the screen was at 1000px but with the scroll bar at the bottom (preferably with css but I can deal with Javascript).
I've read applying min-width to body would do this, but it doesn't (at least on Chrome and Safari).
http://www.w3schools.com/css/css_rwd_viewport.asp
Have a look at this page, it may be of some help.
You can use media queries and set the width of the body tag if it's < 1000
https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width
Here is another trick
https://css-tricks.com/almanac/properties/m/min-width/
Here a nice article about it.
Also try sometimes min-width doesn't work with position static if you have so many child element with absolute position.
body {position: relative}
I hope that will help.
Related
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.
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 have a website that I made (without bootstrap or any or that stuff, and I am having an issue trying to scale everything down for people with a smaller screen resolution. basically I'll want it to detect the size, and apply appropriate CSS classes to elements to scale everything down if under a specific width. Right now I am just trying to build the CSS classes, and I am having some difficulties. The closest I've gotten is shrinking all the content down using:
transform: scale(.75);
That works awesome on the actual content for resizing, but I'm left with a large padded field around the content. a bit hard to explain, but what I want is for the content to shrink, but the divs to still be 100% of the browser (so if there is a smaller browser it fits nicely without this stupid large padded area around the content)
Here is how it normally looks:
image!
and here is how it looks with the added CSS transform:image2!
Any ideas for how to overcome this would be greatly appreciated, Also note I really don't care about my solution not working in IE9 or lower!
The basic output that I want is the equivelent of shrinking the browser zoom to 75% if that helps..
Depending on how your CSS is written, something as simple as this could work:
#media only screen and (max-width: 600px) {
body {font-size: 85%;}
}
If you have divs with em widths that will shrink their width, but you could change that via the media query above, perhaps setting their widths to 100% etc.
This is more of a general question; but I notice on some webistes (including stackoverflow) That when content is off the screen and the user has to scroll to the right background images/color stop at 100% of the screen view. Does anyone have a better idea how to fix this.... other than setting max and min widths?
here is a google doc of two different websites to explain what I am talking about.
https://docs.google.com/document/d/133Uek4Fd3G3eB6Zz4CNomPGzARevCUg4fAV4Xhvin-o/edit?usp=sharing
Josh C's response is spot on. If the elements that have background colours had min-widths that matched the content width (980px in stackoverflow's case) then the issue would be resolved. This is not only the easiest way, but probably the best practice)
Your alternative, if you don't want to set max and min values to your elements that use percentages, would be to not set fixed widths on elements (in the case of stack overflow, it's content width is fixed at 980px, and most everything else is fluid).
If content and it's children used max-width instead of width this problem would disappear.
Alternately, as lookingGlass points out, more fluid responsiveness.
Add breakpoints so that when your window size is below/above your ideal the site adapts.
I am quite some way through a pretty much CSS only solution to make a mobile site for our e-commerce site. It's actually going quite well, apart from the fact that the x-axis consistently has a margin that shouldn't be there - I have put it in the CSS that width is 100% for most properties.
The only thing that has worked in visual practice (it made the y-scrolling really stuttery) was the addition of:
html
{
overflow-x:hidden;
}
So although it looked great and was exactly what I wanted I couldn't get the scrolling to be fixed, which is pointless for a mobile site.
On top of that I also added this to the page to detect screensize:
<meta name="viewport" content="width=device-width,initial-scale=1" />
I think that somewhere the media query is causing havoc:
#media screen and (max-width: 480px) {
Because it is the only place that specifies the 480px aspect of anything, and that's exactly where the margins continue to. So is it something I'm doing wrong here?
In hindsight I'm not entirely sure where I got the 480px from - think it was a copy and paste job!
Other things I have tried were removing the absolute positioning from a lot of elements, making sure everything has width of auto and displaying in a block.
I'm out of ideas and just want everything to be like the overflow-x solution!
Thanks in advance.
As a rule, you shouldn't have to specify width: 100% on anything.
Chances are you have some padding or something on one of those elements causing it to be > 100%. All display: block elements will fill the width by default, you don't need to specify that.
It's not always the padding either, margin-right has caught me out enough times because you can't actually see it but it's there, pushing out the content
My guess is that a padding causes your element to be larger than 100%. If you want to avoid this, you can try applying box-sizing : border-box; to the affected element. Width and height will then include padding so you will actually get 100% ( or X pixels ) of width regardless of the padding and size of border you set.