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
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 2 years ago.
Improve this question
According to the inspect elements menu, this thing called <tbody> exists, and <tr> is inside it. The problem is, tbody, is 100% height and width, which it should be, but <tr> is always 4 pixels less in height than it should be, even when styled at 100% height
THEN
inside there are two tds, one has 20% and one has 80% width, but they both have these annoying border type things, that i cant get rid of, it looks like margin but honestly cannot find anything
This question is a bit of a mess, but i cant find any sort of solution
I would suggest looking at the padding around "tr". A great tool to use is Pesticide (it's a Google Chrome extension) that when it turns on, it will show the outlines of different sections to help you determine what is being controlled in terms of padding/margin. It sounds like there may be a padding issue. If you turn on Chrome Developer, under the Element tab on the right side, if you scroll all the way down, you can see the box model and see the padding/margin that is used in the respective section.
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 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
There is empty space at the bottom of my site, showing just the background image. If I set the height of .content to auto or 100%, that makes things even worse and destroys the site. How can I get rid of this empty space while still preserving the white box holding all my content?
http://www.michaelaoun.com/noursite.html
Link to the html file: https://www.mediafire.com/?l435v31v56du9ms
Add an overflow:auto CSS style to your #mainContent div so it expands to the floating content inside of it.
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 trying to solve this problem in Internet Explorer 8.
I have two div tags whose content should be shown on the same line. I know I can easily achieve this by using inline-block. However, I also want that, if the browser window is reduced to the point where the content doesn't fit in a line anymore, the content of the second div is moved on the line below.
Basically I'm looking for a behaviour of the kind "show both items on the same line if there is enough space, otherwise go to the next one".
Is there any way to achieve this with IE8? Even a Javascript solution is fine.
Try using style="float:left" on both divs. You may need to wrap both of them in another div to get the effect you're looking for.
You can use a media query to check the width of the screen and change the styling based on that:
#media(min-width:768px) { //div style here }
Check it out here:
http://jsfiddle.net/b9ahqnt0/
as well as float left try adding a percentage as a width so when the size of the screen is reduced it can adjust. Although normally when it comes to responsive sites you are better setting it up then adjust the issues as Daniel said using #media conditions to change the layout as the screen changes to what you need it to look like..