I am currently learning web design, and I have made a little Site for a friend of mine.
I have a white box on the right side along the whole screen, which pushes my contend to the left. Seems like a padding, or a margin, or something. But I can't find the Problem?
Its in the responsive view also!
Image of responsive view:
The Site is online at https://tastenwichser24.de/.
Seems you are doing sliding animations and it overflowed. In line 178 <section> tag try adding a overflow-x:hidden.
Related
I am not sure what is causing this.. I have been looking at different smart phone screen sizes in chrome dev tools mobile view, and that random white space on the right side of my page is always there. I can't see any element that has margin showing, or padding on that side.
I thought maybe it was the bootstrap row class causing it, and I made sure to add the row inside of a container-fluid div as the docs say to do.
The weird thing is, when I hover over every element on inspecting, they all show this white space on the right; even if I hover over the html tag... So I'm thinking the issue is bigger than bootstrap at this point.
I have tried adding the following with no changes.:
html{
box-sizing: border-box;
overflow-x: none;
}
When I'm in the mobile dev tools looking at the screen, I can drag and move the cursor left and right and the whole screen shakes to fill that right blank spot... So it is not behaving like it is using border-box..
When actually viewing the live site on my phone, this shaking back and forth doesn't happen, but I still see a slight white vertical space on the right side behind the cursor.. Idk if I'm being too picky and this is just space for the cursor in the phone settings? Although I see the same blank spot on every phone size in google chrome dev tools mobile view.. I know I'm not crazy! Well not completely yet!
Also, not that it helps in this situation(I think), my site is built using .NET Core 6 MVC. I am using Bootstrap 5. I am ready to start removing my media-query css line by line to see what could be causing it.. Its not an obvious issue, but I notice it of course.
If anyone has any idea what it could be, please let me know where to start.
You have to take into account that an element's width is not just the width itself, but a sum of its width, padding, border, and margin, and sometimes border-box doesn't fix the problem.
If you're using animations on scroll like a slide from left to right or vice versa can also screw your pages sometimes.
Well I can't believe it but I had overflow-x: none, instead of overflow-x: hidden; I also had it on the wrong media query in my CSS.
Just glad I'm not crazy! lol
I'm struggling with this website I made using webflow.io
It displays perfectly on desktop, but on mobile I get a white margin or padding on the right side that completely damages the site. I've tried to debug the code but can't find the culprit.
Any help would be appreciated.
The problem seems to be coming from the "Describe your app" section image sliding in from the right.
Adding overflow:hidden to the parent element should fix this or work on making the image absolute.
I have a Genesis Child Theme that's behaving very strange. The layout looks correct, but there's a huge blank white space on the right side and a scroll bar at the bottom. I can't for the life of me figure out what is causing the white space. There isn't a single div sticking out into that white space when I inspect with developer tools, and I can't find anything in the css that would be causing that issue.
The basic structure of the site is
<body>
<site-container>
<header>
</header>
<site-inner>
</site-inner>
<footer>
</footer>
<site-container>
</body>
There are additional divs within the above structure, but there are tons of them and I'm not sure listing each one is valuable since the site itself will need to be inspected. I can't possibly list the entire code structure since it's a genesis based wordpress site.
Does anyone have a clue what might be causing the whitespace? I encountered this problem once before with a genesis child theme, but it turned out to be an image that wasn't resizing and it was easy to find the issue. This time I can't find it for the life of me.
Here's the site link again.
The problem is caused by some CSS on your search input, around line 1456. Remove the width: 100%:
#search-3 input {
width: 100%;
}
I am an HTML/CSS novice and am trying to build a website for my wedding next year. On the main page here I have identical ribbon images on either side of my main div. What I want to happen is that the site remains centered no matter the screen resolution (showing more or less of the ribbons on either side depending on the resolution). It seems to work for the left ribbon but the right does not want to cooperate. The issue is particularly bad on iPads where the entire site appears left justified and the entire right ribbon is visible.
Any help would be welcome,
thanks.
apply the following css to html:
overflow:hidden;
applying overflow:hidden to the img won't work, the img isn't overflowing relative to its own width. (in contrary to how you think the overflow property would work)
Can anyone please help?
I am trying to do the following layout in HTML and CSS. This image is just a rough representation of the general layout for a website.
The top bar (or header) will be e.g. light grey and the sidebar 1 will be the same colour. The sidebar 1 also has a rounded bottom left corner and the sidebar 2 has a rounded top right hand corner. The effect I’m trying to recreate is that the header will “flow” into the sidebar 1 and that the sidebar 2 will “flow” into the footer.
So far I have the boxes coded so that it seems that they are touching and I also have the rounded corners done. But what Ive been stuck with for the whole day now is how to do the colours so that it seems that the 1 is flowing into the next one. Here is an example of what I have so far (still very rough as I am just trying to block out the shapes etc.) hansmoolman.com
The relevant section in the website above is the one called "This is the main container" which is about half way down the page and contains the sidebar 1 (the one with the Twitter feed) and sidebar 2 (the one with all the Lorenm Ipsum stuff). The top bar will be the one with the logo and navigation stuff. The footer is not yet implemented.
Can anyone suggest how I can do this? I am trying to stay away from a background image that will represent this as the sidebar 1 and 2 should be able to grow dynamically and independently of one another should more content be added.
Or can this done with a background image/images?
Can anyone please help as all the solutions I have been working on has become very messy with boxes inside and on top of other boxes. It does not look good code wise and I am concerned that it might not display as intended on all devices.
If more clarity or code is needed on this question just let me know and I can provide both.
Thanks in advance
*Edit - this is a possible solution as suggested by flem
Build your layot with divs like this (spacing just for visibility):
You will also need an element behind each of the rounded corners with the opposite colour. (You only need to do one of them if you set your body background colour.)