When I check my website in Element Inspect in Chrome using the viewport
there is space white spacing hidden on the right which is very hidden. I tried using margin:0; and padding:0; and nothing has been working for me yet. I’ve tried to resolve this problem for 3 days now.
The input element is going to cause an overflow when the viewport is below 300px. Don’t use a fixed width (use max-width) or create a media query that lowers its width as needed.
At an even narrower viewport size the h1 will overflow as well. You can do a fluid typography setup using clamp() or create a media query that handles it (lowers its size).
I tried using these values but I can still see the background white excess space
here’s the new value I used:
.search-container input[type="text"] {
width: 100%;
max-width: 300px;
height: 45px;
padding: 10px;
border: none;
border-radius: 100px;
font-size: 16px;
background-color: white;
}
.quote h1 {
font-size: clamp(24px, 8vw, 70px);
margin-bottom: 10px;
}
@media (max-width: 600px) {
.search-container input[type="text"] {
max-width: 200px;
}
.quote h1 {
font-size: clamp(20px, 6vw, 60px);
}
}
@media (max-width: 400px) {
.search-container input[type="text"] {
max-width: 150px;
}
.quote h1 {
font-size: clamp(16px, 5vw, 50px);
}
}
Please update your Codepen as well.
At what viewport size are you looking? I don’t see an overflow until 208px which isn’t a screen size you need to worry about.
Make sure you look at the page using the Debug mode (full page, no iframe).
Change View (button to the right of Settings) > Debug mode
If you really want to know what the page looks like in the browser don’t use Codepen. Use a local server and serve the page (you can use a VS Code extension like Live Server or Live Preview).
Okay, I updated the code in Codepen and just used max-width but it doesn’t work yet.
@media (max-width: 960px) {
.search-container {
top: 80%; /* Adjust the position for smaller viewports */
}
}
here’s the link to my code pen
If you have time I would appreciate it if you could check my project through vscode. I’ve been stuck on this problem for a while and starting to feel discouraged, yet I’m still trying.
Hello!
I tried your code in VSC and it might be the giant, free-roaming logo that is causing your headache.
I put it into a div and gave the logo class max-w-40%, under 600px screen sizes media w-100%. Now the white-space only appears in < 300px viewports, so nothing to worry about.
Adjust the percentages to your liking. Or separate the logo and the text into an image and HTML text, this is easier to control.
Hope it helps!
@alee62580 Your Codepen code doesn’t match the code you posted. You have targeted the container but did not change the CSS for the input element. The h1 CSS is missing as well.
Please answer the question; at what screen size you are seeing the issue?
Post an image of it.
You have a stray / on line 157. If you can’t format the code (using the dropdown on the code box) you have an error.
Please make sure your repo and Codepen contain the exact same code.
@DanielHuebschmann But that isn’t in the Codepen.
Okay I put the values inside CSS again @media (max-width: 960px) {
.search-container {
top: 80%;
/* Adjust the position for smaller viewports */
}
.search-container input[type=“text”] {
max-width: 200px;
}
.quote h1 {
font-size: clamp(20px, 6vw, 60px);
}
}
@media (max-width: 400px) {
.search-container input[type=“text”] {
max-width: 150px;
}
.quote h1 {
font-size: clamp(16px, 5vw, 50px);
}
}
My screen when viewing my website is 2206 x 1125. In first glance I’m not able to see the white spacing only if I try to zoom in the right closely, but when I adjust the screen to 430x1125 the white spacing is visible. I eventually want to make my website responsive for any device.
That nav isn’t on your Codepen (well some of its content is missing).
It looks like it’s just the nav content overflowing. You can add flex-wrap: wrap; to the nav container or handle it manually in a media query by switching the flex-direction to column. Also, any images in the nav need to be allowed to shrink or made smaller manually.