I'm new in programming and I'm trying to make my website, but I'm stuck with an issue:
When I opened my site in a landscape page view, a blue column appear at the right side of it. It's like it did not fit the 100% width of the page. When I scroll down, my sticky menu is able to fill it. Does anyone have any idea why?
jsFiddle https://jsfiddle.net/user582/ycx56p4h/1/
Site in googledevtools
The shortest answer to this would be that you need to restrain your page's width and hide all overflow. To do so, you can use:
html{
max-width: 100vw;
overflow-x: hidden;
}
The vw unit is quite unknown by people but is very useful as it matches the user's viewport width. Once you have set the max-width, you can hide all overflow on the x axis with overflow-x.
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
So, I am making my own responsive website.
My question is - how can I set image width properly?
Image has to be set with min-width and width 100%. I was trying to mix them like that
max-width: 100%;
min-width: 100%;
But it didn't work. So i used this code instead
max-width: 100em;
min-width: 100em;
It works fine, even on my website. I added some content recently, and there was a problem with scroll bar (there wasn't scroll bar before, lack of content). Image was set to display at 100em, but scroll bar took some space, so to see whole image i had to scroll page to the right. I solved the problem using this code, but i don't know if it's correct solution.
max-width: 98.96em;
min-width: 98.9em;
If there is any "less mechanical" solution, then please tell me about it.
Thank you for your help.
I suppose you don't mean em , but vw - 100vw is the full viewport width. em is a relative measurement unit derived from the current font size of the element.
I'm trying to build a site with an initial 'landing page' look that you'd then scroll down from to see the rest of the content.
I can easily create a div that will fit the screen on the device I'm currently using, but how can I code for other devices of different screen sizes?
I've tried using '100%' which of course works initially but then continues to fill the screen when you scroll. I've tried defining a specific aspect ratio but again, that will only work for the screen I'm working on.
To be clear, I want the div, or img to fill the screen when a user first lands, then when the user scrolls the div/img should move up with the rest of the page.
I want to achieve this using only HTML or CSS.
Thanks in advance for any tips!
You can use vw and vh on the first <div> to fill the viewport. You can use this for reference: https://developer.mozilla.org/en/docs/Web/CSS/length
This'll do the trick:
.full-page-container {
width: 100vw;
height: 100vh;
}
vw and vh units represent a percentage of the viewport size. Hence 100vh will mean 100% of the viewport height and won't be affected by scrolling.
So I have the following page with a navbar: http://michigangurudwara.com/pclass/
and it doesn't look bad, but when you resize the browser, everything overlaps. What I want is for the navbar to fill up the whole width and then when the screen is resized a scroll bar should pop up, but when I do width:100% in the .navbar class, this doesn't happen. The only way to get a scroll bar is with an absolute width. But if I do that, I can't take up the entire screen width for different monitor sizes. How would I do this?
Set a minimum width...
.navbar {
min-width: 1000px; }
Anything less than that will cause the scroll bar to appear.
This is certainly a different style to navigation, to have the nav bar always the same width could make large issues for many users. A better approach is to set the page width to say 1000px; and then have auto sizing margins on either side.
.navbar{
width:1000px;
margin:auto;
}
However if your determined to do it this way then you could always get the browser width with Javascript and then use that to set a dynamic width variable.
I was also going to suggest minimum-width:100%; but I think you'd still come across the same issue.
The problem is when using percent the template will re-size to the browser width where as pixels will always represent an absolute value as you mention.
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.