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 8 years ago.
Improve this question
I'm having a query with my site currently which I require some assistance with.
When a user will load up my site, the image of the 'cutlery pouch' will be resized according to how big the user's browser/monitor is. However when this happens the image some users see will be the background of the image, instead of the main feature, the pouch.
I was wondering if there was a way around this so the image resizes when using 100% width and a fixed height.
Here is a quick link to my problem so you guys may be able to help me.
A link to my website
Thank you in advance for any helpful responses.
Instead of
background-position: 0 22%;
try
background-position: center 22%;
And perhaps edit the image to have the pouch more centered.
You could probably just adjust your image so that the pouch is centered in the image itself, then use background-position: center;
Edit: I notice your image is a square, where as the container you're putting it in is a rectangle. This is also not helping towards it being positioned correctly. Try adjusting your image to the aspect ratio of the container as well.
Related
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 11 months ago.
Improve this question
I've been working upon a Personal Portfolio for a few days now. I originally made it for my freeCodeCamp certification. But, now I wish to expand it however I've been facing a strange issue with the page where part of the body goes off-screen. I've tried resizing and removing the height of various elements and changed their display and position properties. But it's not working. I mean, it's not the biggest problem since all text and images are visible but still it's annoying.
I've hosted it through Github Pages here is the link:
brainstormed.github.io
It would be of great help if someone could point out what I'm doing wrong.
Thanks!!
The fixed padding of 40px on projectTile CSS class is causing the issue. On small screens the horizontal space is already filled by the image width: 80vw; padding: 10px; margin: 20px. You can either remove that padding or use a media query to remove it on small screen sizes.
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 last year.
Improve this question
So I'm trying to create a login page, and it's starting to look good, but when I resized the window, the "[] Remember me" field jumped out of the div:
I want it to always stay like this:
I've made a demo of this login page here: Jfiddle DEMO
IMPORTANT: The width in the example has been set to 10% just to show what I mean, inside the class .div_center. Remove this to get normal responsive size.
In your .div_center you have provided a height of 370px. But due to the margin incmoing from top, your checkbox is being pushed outside the box.
Here's a tweak, just set height to fit-content, and the box would always keep hold of it's contents.
Maybe you can use clamp in font-size,
ex: font-size: clamp(1rem, 2.5vw, 2rem);
Go through the docs: https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()
or you try to do with media query
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 2 years ago.
Improve this question
Right now it is not covering the whole width of the screen
I have searched and tried the solutions for all those with a similar questions.
It either pulled the image right or left and made it bigger.
If anyone has any ideas that would be great.
I'm a student and beginner at coding.
Here you need to use background-size: cover; in your css to get the image to cover the full width of your area. It is the most flexible way of doing it, but it will cut your image at the bottom and on the sides depending on how small the screen is and how tall the container element is. You can of course adjust this with css background-position.
Here you have some other ideas for how to solve your problem: https://css-tricks.com/perfect-full-page-background-image/
background-size:cover; will fix this
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 6 years ago.
Improve this question
I am using a Relative DIV for the entire page but somehow A LOT of space is being left at the end of the page.
For my background, I had used an image but even that image is not that big.
And I've even set the bottom margin to 0px.
http://www.freelancertanish.comli.com
Thanks in advance !
Most of the whitespace is there because of <div id="div-1whiteback">, which has been given 100% height and positioned down about halfway (adding about half of the page's height again to the bottom). There is additional excess whitespace at the bottom because each of the divs surrounding the logos have been given a specific percentage height which exceeds their allotted space.
Hope that helps!
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
2 weeks ago I started with learning HTML and CSS, and I really enjoy it.
I've been struggling with getting my footer(div) to resize with my background on my Home page, though. So whenever I zoom in or out the background stays, but the footer(div) moves around. The same when I resize my browser.
It just looks weird. You can say I want to "glue" my div to the background so they resize and move together. It's hard to explain, but try taking a look.
http://www.futureplane.net (the website is still in a work in progress, not finished at all)
It doesn't look great.
Does anyone know how I can fix this?
You have min-width: 1200px set on #wrapper. That's creating an issue with the nav area not being flexible if the browser is resized. However, you will need to refactor the <nav> elements so they also resize in with the nav/footer bar. You might try using float instead of position to start with.
Example:
#navbar {
float: right;
margin-left: 700px;
margin-top: -155px;
width: 50%;
}