I'm having this problem: I did not set any width on my root element, I deleted everything I had from my HTML elements, yet it still sets root's width to 980px even though you can clearly see on the screenshot that it's not the real width. What is more if i resize it a little, it still says its 980px... And so it goes on every size up to 980px width.
I tried setting its width to calc(100vw) - without success, only setting it with pixels actually changes it, but that's not what I want obviously. It bothers me a lot because my mixins on min-screen won't work properly because of that.
Am I really doing something wrong here? I don't understand... Any help/explaination would be nice.
You'd doing it right.
Don't trust Chrome's responsive design mode. I is giving you the #2x dimensions.
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.
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 have created my website as a fixed layout, with a width of 1600px,
but the webpage on a smaller resolution looks too big.
What am I supposed to do to make it looks good in every resolution?
Thanks for help
Use relative measures, like width: 100%. You can constrain this even more by using min-width and max-width.
Apart from that, you can use CSS media queries to make styles that only apply if certain conditions are met, like a minimum or maximum width. If you use that, you can change the whole look and feel of your website, for instance by hiding parts on smaller devices or change from a 2 column to a 1 column text presentation on smaller devices.
A percentage-based width would change the width depending on the screen size, but you should also use min-width to ensure the page doesn't become too thin that it ruins your content.
Your options:
Use a narrower fixed width. Staying under 1,000 pixels is fairly safe though not perfect
Use percentages for page width instead, though this is difficult if you need to have a set width for child elements to look right
Do a combination of the above and use media queries in your CSS to make your site responsive. It'll fit every screen width you specify AND you'll have full control over your layout at each trigger point.
Here is a great resource for learning about responsive sites - this is the way to build a modern website, so though it might seem confusing it's worth every minute you spend on it.
http://bradfrost.github.com/this-is-responsive/resources.html
Good luck.
I had to redo a website from flash to html/jquery.
Everything looked great. Until I tested the site on a netbook where the screen resolution is much smaller. All the elements were misaligned or didn't stretch as I wanted it to. Or there were scroll bars everywhere.
So, How would do I make it stretch or resize properly,
Is there a property which I can set somewhere that would resize everything proportionately?
You should use heigh / width in percentage(%) rather px / em. change the css file.
Is there a property which I can set somewhere that would resize everything proportionately?
No, I wish :P You'll need to redo the layout to make it liquid or use media queries to make it responsive to different resolutions. I'm afraid both solutions could be pretty complex.
Is there a property which I can set somewhere that would resize everything proportionately?
Everything? No. Font sizes won't adjust based on window size (at least not without JS).
You can set the widths of most things using percentage units in your stylesheets, but even then there will be a point where things will break down.
The current buzzword is responsive web design (I can't comment on the quality of the links from that page) in which media queries are used to provide different designs for different sized browsers.
The property called Media Query we mostly use this property with Responsible Web Design. In which we tell browsers change the specific css property at that particular screen size.
Check this article for more http://css-tricks.com/6206-resolution-specific-stylesheets/
& for Responsible Web Design mostly use value in Percentage instead of Pixels .
Check THIS website for more reference.
unfortunately there is no "magic" which scales things up/down. i can think of some guidelines:
Use relative widths for things (percentages) instead of absolute value
no hardwired sizes, keep them in separate CSS documents
work your way up: choose a minimum resolution, work upwards from it. it makes sizing things much easier.
The question was to RESIZE not to REALIGN. Using percentiles will only change WHERE the HTML elements show up on the page. It will not change their SIZE.
you can use with and height in percentage to set your screen for all resoulation..Give the 100% width to the body and the div you want give 100% width.
I've set width to 100% for all main divs but there is still horizontal scroll-bar. Can't fix that problem. How to remove it? I don't know why it's appearing. Please take a look at my test page. http://aquastyle.az?lang=en
I cannot get your test page to open but this is typically caused when you have padding, a shadow, or a border applied to the 100% width element causing it to render wider than 100%.
Without seeing the page, I can only give the following generic advice: This can be fixed by removing the style properties that are causing the problem or reducing the width until the problem disappears.
EDIT:
After looking at your page, you don't seem to have a problem as you described. You just have too much (too big/wide) content side by side. When I make my browser's window about 1700 pixels wide, the horizontal scroll-bar disappears. This is an issue of poor layout more than programming.
EDIT 2 (The Root Cause/Solution):
It seems that the OP's PHP program is calculating the "display" width and placing content accordingly. The problem is that the "browser window" width is not the same as the "display" width. My display is 1680 pixels wide and the OP's PHP program reports that correctly. Naturally, my browser window is not 1680 pixels wide, more like 1000-1200 pixels, so I get a long horizontal scroll-bar which disappears when I make the browser window exceed 1680 pixels. Taking the width of the vertical scroll-bar into account, you actually have to make the browser window about 20 pixels wider than the display in order to get the horizontal scroll-bar to disappear (for me that was about 1700 pixels total). I imagine the OP can fix this issue by looking at browser's "viewport" (window) width rather than the computer's "display" width.
You'll want to use
overflow:hidden
on the element you're trying to eliminate the scroll bars from.
Or, you could use jQuery:
$("body").css("overflow", "hidden");
EDIT:
Your layout is 1920x1200. I have that resolution right now and I NEVER max out my browser window. It's always 20 to 25% smaller.
Most if not 98% of website layouts are 960px max width. I looked at your CSS (nice try with disabling right-click BTW) and you're left and right columns are both 200px EACH, while your main-content width is 1460px. I think you see where I'm going with this. I'm sorry, but the only way you're going to get no scrollbars is to redo your layout where everything fits in a 1000px layout or less. Preferably less. An important thing to check is the screen resolution stats that help in determining what percentage of users is running at a certain screen resolution. This will help you in targeting your preferred audience.
TL;DR
You gotta redo your entire layout, it's too wide for the majority of users out there..