how to remove right side whitespace in my web page?
hi guys, can you please help me gid rid of this white space? it only appear when i am in 438 screen size.
67 Replies
Looks like the scrollbar area?
there is no scroll bar
but i think i have solved the problem withi this <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
the white space is gone
maximum-scale=1, user-scalable=0 <-- this is a pretty terrible idea, as it disables the zoom completely
you're fixing design issues by obliterating the accessibility of your websitethere's stuff that's overflowing, which will cause this type of issue
i see, now i fix that hero thats overlapping but still i get this margin right and i also change the meta data, can you help me?
sure
where can i see this by myself?
here is the updated one
i did not publish it yet
by the way, a quick way to check what may be overflowing is to add this to your css:
but if i had to guess, without it being published, i will say the issue is the header
ok let me send youmy header
don't bother
it's way easier if you publish it online
i am guessing it is the header because of this
if i had to guess, the width of that header is over 325 pixels
looks like 340px now
header{
position: fixed;
width: 100%;height: 105px;
top: 0;
background: #171717;
display: flex;justify-content: center;align-items: center;
}
so many divs ...
what's the gap on this?
the purple area between the name and the hamburger icon
i use grid here for my lay out
for the whole header section i use grid-gap 51px
yikes!
that's massive!
why?
because that's 51px that will always be taken
you are using a margin-left on the title
yup to have space a little
instead, you can use a layout like this:
and then, you actually set a decent proper gap, like 8px
or even 12px
here is m grid .head-content{
align-items: center; justify-items: flex-start;
margin: 0 auto;
display: grid;grid-template-columns: repeat(6, 1fr);grid-gap: 51px;
max-width: 1390px;
}
that's a mess
can you publish this somewhere?
it's a lot easier than guestimating based on screenshots of unrendered twig + html and some screenshots of the website
i cant yet cause its not yet done. but you guess the problem is the header only?
yes
why you recogninze quickly that its the header the problem?
because it's the only thing that's overflowing in the screenshot
here also in cmments section they have the same width with the header
that will cause the issue too, yes
if i had to guess, the issue is the quotes
see how the text in the middle can't be reduced anymore?
it's as small as it can get, and it overflows
then you have just a pretty big gap between the quotes and text
i can't tell exactly what's happening because there's a huge lack of context
but without it being online somewhere, it will be nearly impossible to debug this by myself
I just set this to overflow auto and its good now. Now Only the header is the problem
but that means you have an horizontal scroll
which usually gives a terrible experience on mobile
at least to me
i end up scrolling vertically and horizontally by mistake
Yeah but what can you do else if its not gonna fit on mobile screen?
fix the layout issues
if you want, you can copy the html and css, then put it in a private codepen or jsfiddle or something, instead of hosting it somewhere
and you can replace the images with placeholders
Yeah im trying in code share though so i can share my code
the problem isn't that i/we don't have the code
But i guess thier in trouble,let me try in code pen instead
it's that i/we can't actually see it running
it's important to change stuff and mess about in the layout
for example, this code here
you have
width: 100%
but 100% can be anything - and in this case it's the width of the entire content with the overflow
if you set the width to 100vw and then to 100dvw, you probably won't see this problem on the navbar, but it's possible it doesn't do anythinghere is my header code https://codepen.io/justine1607/pen/eYoQXrL
are you sure it is correct?
yeah ijust change the data cause i use dynamic data on my code
i only change the data to that like the number
im sure there's some css missing because the number is always visible
i think here is the corected one https://codepen.io/justine1607/pen/eYoQXrL
i didnt cahnge anything to the css
the number is still always visible
and the menu links too
ouh i forget the media query on the number
cause i use media to them
btw, verify your email
i tried the full view, so i could use the browser resolution tools
not quite there yet
i dont know why there is no email i recieve
i don't know why either
but with that set up you cant fine the problem?
find rather
no, because it's behaving completely different from the screenshots
maybe there's some css missing?
here i think this is complete now https://codepen.io/justine1607/pen/eYoQXrL
why the hamburger button is there but in my end there none
i alreday saved it
can you see it now? no burger button?
you can only see the burger in mobile
almost, but doesn't look like the menu you have
i don't think it's there yet
but just looking at my code can you spot the problem?
that's the problem: it behaves differently, therefore it can't be compared
how about this
for now, just finish the backend and ignore this issue
after you finish everything else, you can put the project online somewhere and we can re-visit it