I am building one website and I have a weird gap on the right size of the screen.
This gap appears only at mobile view and with portrait view (with landscape everything seems to be OK). Width of body and html is set to 100% with margin and padding set to 0. I figured out that the real width of the body should be 105vw, but is this true for all devices?
Any way how to clearly solve it?
Site: http://valkovic.eu:8080/JanWilliamDrnek/
I could reproduce the first time but not the second maybe you are adjusting as I looked.
it seemed that the logo was pushing out over the body
.title img { margin: 2em auto;} in the css fixed the issue for me.
Unsure about the 105vw unless you are trying to hide something offscreen the max value should be 100vw.
Related
I've been searching in other questions since this is a pretty common problem but none of them applied to my case.
I'm developing a small web app with React, just to get the basics, and the background img works fine in mobile view (there's a media query that changes it at 480px to a portrait one) it resizes from 480px to 320 and looks good.
The problem is that, at certain heights if you stretch or wide the window the background gets stucked in the middle of it (if you recharge the page it appears as it should, being the window in the same exact place as where the problem occurs).
The img is loaded through CSS in the html, If I remove the background-size property it works as expected in desktop and mobile, but when I cross the 1260px width it doesnt cover the full width.
I have this codesandbox with all my code: https://codesandbox.io/s/stoic-brahmagupta-ro2kb?file=/src/style.css
And I attach an image of the problem. Thanks in advance.
As u r testing this you can see the content of the App is overflowing the html element
I rather use min-height on global elements like body or html than static height to prevent such as cases.
So to fix it you just simply add
html {
height: auto;
min-height: 100vh;
To prevent not overflowing instead of scaling we just add min-height equaly of 100vh (viewport height).
I think it will propably do the job without height: auto; but i like add it to prevent even more edge casing
I have created the following codepane using the react-flickity-component to show case images:
when i resize the browser the margin between the images changes and disappears
no matter what i do next except refreshing the page the margin between the images will be gone
if i add a margin-right:10px to the carousel-cell the the margin doesn't disappear codepan:
but the margin size is not consistent if i resize the browser window:
it can be larger or smaller when i resize the browser into different sizes
any idea on how to solve this issue?
May be late to the party here. Just add margin-right: 10px to your .carousel-cell class in your stylesheet.
You can try padding: 1%, or use % in your margins
I've been trying to fix the width of a mobile view. The below linked page displays correctly on most devices (more than 400px wide), but has a margin on the right side of the header on devices with less than 400px horizontal, like the Iphone 6, Iphone 5 and Galaxy S5. The html element says to be the same width as the screen, but when hovering over it, the visual indicator displays otherwise.
I've tried hiding elements to see which element is the problem, but I have not been succesful in finding the problem. I'm hoping one of you might have some insight in the problem at hand.
Screenshot of the problem:
In this screenshot the header is not full width, while the content is. So the problem seems to be in the header somewhere.
The page is https://www.matrastopper.eu/bestellen/.
I'm assuming some part of the page is scaling problematic on small screens, but I can't find which.
change this width
.no-columns .box.right {
background-image: url("/media/layout/box-right.gif");
width: 380px;/* change this width */
}
this css
https://www.matrastopper.eu/css/screen201410.css?
line no 836
I've looked at many "mysterious white-space at bottom of page" issues here on SO, and played with the viewporttag many times, but I still cannot figure out what I'm doing wrong!
The page in question is: http://www.seniorchoicesunl.com/error_documents/error401.php
Here's what it looks like on mobile from Chrome Dev Tools:
Any Ideas on what I'm doing wrong?
Edit:
setting ANY initial-scale is bad news! It makes the font too tiny!
Take a look:
The desired mobile look, while keeping the desktop and tablets as-is, is this:
P.S. Fixing this issue could reciprocally fix other related issues I'm having with other webpages.
Add this on top of your css file :)
html,body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
it fixed the bug for me.
What's going on here:
You've set width=device-width, this makes the layout size on your page equal to the device's screen width. i.e. making an element 100% will give it the same width as the screen.
Chrome infers the layout height using the width and screen's aspect ratio. i.e. height=width/aspectRatio
The sub_container_div element actually ends up being much wider than the layout width of the page. In my case on a Nexus 6, the device-width is 412px while the sub_container_div is 594px wide.
Since the content is wider than device-width, Chrome allows zooming out and loads the page at the minimum zoom level but this doesn't change the layout width/height so height 100% only fills device-width/aspect ratio pixels, which doesn't fill the zoomed out viewport.
The correct way to fix this is to make sure all your content is contained by the layout size. In your case, the reason the sub_container_div is wider than the layout size is that your padding/margins cause it to expand outside the parent. The solution is to add box-sizing: border-box to the sub_container_div and dialog elements and width: 100% to sub_container_div. That way, Chrome can't zoom out and you can't see outside the layout box (in HTML spec language, that's the initial containing block).
I had the same issue on Chrome 77
I fixed the problem by removing height: 100vh on the body tag.
This seems to fix the problem:
Change <meta name="viewport" content="width=device-width"> to <meta name="viewport" content="width=device-width,initial-scale=1.0">.
Override width: 25em; on .sub_container_div in your mobile CSS so that the container scales with the width of the view.
If you do not want the font to scale, it seems just adding initial-scale=0 will work as well. However, this will make the text very hard to read. You can play around with different scales, but it seems just setting it will fix your issue.
In my case one element was too long for a mobile screen and it broke the webflow. After I shortened the width of the long element, the extra white screen was also removed from the footer.
Here is the site in question: www.prestigedesigns.com
The problem is that my header and footer won't stretch to their assigned 100% but only on iPhone/iPad.
I've tried what I think is everything and I could really use some help? Is there anyone else that has a similar issue?
Thanks.
It's kind of a viewport issue with mobile Safari, but you can get the same effect by shrinking the width of your desktop browser window and scrolling right, you'll see your background starts dropping out.
This is because when you're setting width:100% to your #top and #header divs, you're telling them to resize to the width of the containing element, which in this case is the browser window, (or viewport). You're not telling them to resize to the content within.
Mobile Safari's default viewport width is 980px, so it uses 980px as the width of the containing element for your divs. This is why your layout, which is around 1050px, is getting its background chopped off.
You can fix this for mobile Safari by directly setting its viewport (read Apple's Docs), or by adding min-width:width of your design in pixels; to your body. Mobile Safari will use the min-width's value for setting its viewport, and it'll also keep it from happening in desktop browsers as well.
Set the viewport to adapt your page on any device.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Set min-width:(Width of your design)px; in CSS file and this issue will be solved.
it's not assigned width: 100% the header is getting width: 1009px; same thing with the footer.
Just a hunch as I can't actually test it, but the foot element you have within footbar is set to an absolute width in pixels while the footbar is set to % - the same with your header element - try switching these to % too?