This question already has answers here:
How to keep website width fixed (irrespective of screen size)
(4 answers)
Closed 6 months ago.
This post was edited and submitted for review 6 months ago and failed to reopen the post:
Not suitable for this site
So I’m currently working on a basic html web page that requires me to have a static layout and a fixed width of 1000px however when I do that I’m left with space on both the left and right of the page but when it’s on auto my elements such as my nav and other container elements take up the space etc take up the full width. What am I missing ??
Any help would be great! Thanks
I didn't quite understand your question, but I think this is the solution
width:100%;
https://www.freecodecamp.org/news/html-page-width-height
As someone say in the commants, your page is not always x pixel size so It's hard to do but you can still do something like :
body {
width: 1000px;
height: 500px;
}
But the things is that some people have a small screen so they will have a scrollbar or maybe you can use a lot of Breakpoint
Related
This question already has answers here:
HTML / CSS - adjust font-size to fill parent height and width
(5 answers)
Closed 6 years ago.
What I need is the text to apear in its maximum size, withiut wrapping or going outside of the screen. I've tried with #media and changing the font-size, but this got too complicated! What I am trying to achieve is, making the faces at example.com appear at their maximum font-size even on mobile devices. The idea here is to not use media queries...
Thry the snippet to view iframe
iframe {
width: 100%;
height: 100vh;
border: none;
}
<iframe src="https://www.example.com/404.shtml">Your browser doesn't support iframes</iframe>
my initial though would be to use the vw property for the font-size. I have created this fiddle to demonstrate how it works. Resize the render screen to see how the font shrinks as the window gets smaller and grows and it gets bigger. You can use media queries to determine the max font size.
For the no-wrapping just add white-space: nowrap; in your css.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
My website is not working correctly in the mobile browsers here is the link
the navigation panel is not stretching 100% not covering the about us section
when viewing in the browsers please take a look and suggest a solution thanks.
Let me explain:
1) You want to avoid hardcoded margins cos you never know what type of screen size the user has. Instead position your nav in the middle with automatic margins, like this:
nav {
margin-left: auto;
margin-right: auto;
width: 900px;
height: 50px;
font-size: 18px;
font-family: helvetica;
}
2) Your nav now tries to fit its parent div (navbar), but navbar does not have a width set, so the width stays at 900px. But your #maincontain again has a hardcoded width of 1280px. Your images also have a width greater than 900px, this stretches your page to the biggest size but the navigation remains 900px therefore does not stretch.
3.1) Easy solution: set navbar to have: width: 1280px;
3.2) Correct solution: Remove the hardcoded width from your #maincontain, your images and anywhere else that stretches the screen.
3.3) In a long run, you will struggle to make a responsive website like that, I suggest using http://getbootstrap.com/ as a template, as its responsive, or learn how to use media queries to make your site responsive.
If this helped please UP the post and mark it as an answer! Thanks
This question already has answers here:
Help with footer always to bottom
(6 answers)
Closed 8 years ago.
I made a site for a friend of mine. You can see it here.
The thing is i want the bottom part of the page actually be on the bottom of the site. And the images resizing with another resolution.
Example:
Watching the site on a 1366x768 resolution the page is always in view like here:
But when i switch on a higher resolution with a bigger height(1280x1024) it looks like this
As you can see there is many space between the bottom of the page and the bottom of the site itself.
I want it to keep it like the 1366x768 resolution always "fullsite" the images getting bigger at a higher height and the "footer" is always at the bottom of the page. Like a dynamic fullscreen page.
I hope you can help me i thought about media queries but i am not sure if this is the best solution and if so how it would be the best to actually query them.
Thanks for your time i appreciate your help !
I don't think it's a good practice to fix the footer to the bottom, because it would hide content and worst case would be no space for any content if the window height is smaller than nav height + footer height.
In this case if you really want to move the footer to bottom, I'd rather use some javascript to add padding-bottom to the content (slider in this case), if the window height is bigger than your website height:
var windowHeight = window.innerHeight;
var websiteHeight = parseInt(window.getComputedStyle(document.body).height);
if (windowHeight > websiteHeight) {
var diff = windowHeight - websiteHeight;
document.getElementById('slider').style.paddingBottom = diff+'px';
}
Put this inside a function and call it in body onload. Notice that if you hover over the shoe, the content height will increase and move the footer down further. Thats why in responsive design you usually don't fix things vertically, but instead let the content height be a flexible variable...
Another approach would be CSS min-height property on the content to make it take up a minimum amount of the browser height.
This question already has answers here:
Web and physical units
(2 answers)
Div width in cm (inch)
(6 answers)
Closed 9 years ago.
Every product in my eshop must be displayed in it's real life size (cm or mm) independent on the resolution my visitor is using to view it.
I'm searching for a solution that works on all browsers.
How can this be done?
How well do mm and cm measurements in css work?
As far as I know, in css you can use cm, mm and in as units for any property that takes a length value, so
height: 100cm;
Will set an element's height to 100cm as measured on screen. However, for a quick test I created a webpage containing the following:
<div style="height: 10cm; width: 10cm; background-color: red">
This div appeared 10cm on one monitor, 8.9cm on another, 6.35cm on a tablet and either 2.05cm or 3.3cm on my phone depending on the orientation. So while you can set absolute lengths in CSS, there really is no guarantee that is what you are going to get. Unfortunately I don't think there are any more accurate alternatives either, although you could always try slaughtering a goat to improve your chances.
the spec
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I want to build this site: http://www.alsite.com.br/misskessi responsive... but i have some doubts about the responsive format.
I want to know what i need to do to images, links, texts...? i think this is with percentage, but how much?.. how i can see how much i need to resize to fit the resolution....
exemple:
on my resolution (1600 x 900) this works fine:
#wrap{
position:absolute;
left:50%;
top:50%;
margin-left:-495px;
margin-top:-359.5px;
width:990px;
height:719px;
background-color: rgba(247, 8, 8, 0.2);
}
but on 1024x768 resolution, appears scrollbars... so i need to responsive this...
but how?
can anyone help me?
I hope this time i answer on a question about responsive design the question will not get deleted ;)
There is a difference between responsive design and percentages.
If you want to go for percentages you have to to add them at every point. Currently you are having it centered on the screen but your width and height and margins are fixed (in the logical, not the css way). You would have to change them to percentual values too. To keep the image from getting to big you should check out the max-height / min-height properties (the same way for width, left etc.)
Furthermore that is not really responsive, to make you site responsive and adaptive to even very small browsers you should check out media queries (http://css-tricks.com/css-media-queries/ and https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries). These two sites helped me a lot, when i had to create a responsive website in the past weeks (http://wywy.tv/howimetyourmother).
With media queries you can modify your css classes if various conditions are fullfilled, most times the width of the screen, by putting this in your css-code for example:
#media (max-width: 755px) {
.content {
width: 100%;
}
.header {
margin: 0 auto;
}
...
}
You can extend this code quite much, maybe have a look at the css-files on my developed site to see what i did and how it affects the appearance.
Here are a few things to keep in mind when building responsive sites.
Use Media Queries to define important break points within your design. Some common break points are <320px, <480px, <768px, >768px and up.
Make your layout fluid. You can use a grid system if it helps - 960 Grid System, Gridset, Columnal, Golden GS, etc.
Images should be set at 100% with a max-width. Make use of break points as well - You can make your images change positioning in relation to your different break points. When working with mobile layouts, keep only the essential images and hide the useless (non-important) ones.
Make use of Max-width/height and Min-width/height. These are very helpful as it lets you define a "lowest and highest" width/height in a few little characters.
For mobile layouts make your columns 100% width - You basically will use one column that spans all the way down. The media query you will use for this is for anything <320px.
As I said above - Keep only the essential content. On your bigger layout (>768-1024+) you can use your fancy images, but under that make sure you think content first and fancy second. This is specially important for mobile layouts.
Keep your layout simple
Don't forget your viewport meta tag.
< meta name="viewport" content="width=device-width" >
You could make the image a background-image and use "background-size: cover;", which scales it to browser size.