there's a small white strip displaying on the right side of my webpage when viewed on iPhone. this has been asked on SO before but after trying a handful of solutions and debugging i still can't work it out.
can anyone work out which element is the root of problem?
source is http://buildtrumpwall.com
screenshot: http://s23.postimg.org/tkofnnere/i_Phone_Screen_Shot.jpg
its the min-width css attribute on your banner element
#banner {
margin-top: -180px;
width: 40%;
min-width: 400px;
}
remove that and it'll stop pushing your screen out past the screen boundaries
Related
To demonstrate this issue, I have a very simple webpage with a single div element with width set to 100%, and a background color to verify its width. On most devices I've viewed this on (PC, smart phones, tablets), everything behaves exactly as expected. However, I have an iPad pro 11" that will show the page properly in portrait mode in Chrome:
Portrait mode
But when rotating to landscape mode, it keeps the same width in pixels and does not extend to 100% of the new width:
Landscape mode
I tried searching for this issue for hours, but never seemed to come across anyone with my exact issue. I came across numerous answers that said to make various changes to the <meta name="viewport" ... /> tag, all of which I tried to no avail. It's almost as if rotating the device does not tell the browser that the viewport dimensions have changed. I am fairly new to front end web design and very new to responsive design for mobile devices, but it seems like something as simple as an inline style for width 100% should suffice for my needs here.
Can anyone offer some guidance?
EDIT: I discovered that I can load the page initially in landscape mode and get the desired 100% width, but then when I rotate to portrait I have the opposite problem - the element extends to the right beyond the edge of the screen. And again this only seems to happen on this specific model of iPad (Pro 11).
My trick for always getting the HTML body to occupy the whole page while the children can behave responsibly is doing:
body {
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0;
margin: 0;
}
Then the child div inside the body could be:
div {
background: red;
height: 20px;
width: 100%;
}
The trick here is basically making the body responsive with the browser's viewport and allowing the children to flow inside the body.
Tip: try to brush up on CSS3's Flex and Grid model, which is the norm nowadays, and will allow you implement flexible layouts.
Why is there an empty white space on the right side of my mobile website display? like this my error screeenshot here and this is my live link
I beg for your help and thank you :)
You have issue in awan.png image. This image is absolute position for Mobile and Desktop. In smaller screen this image showing in outside of .top-container. You have two option to fix this issue.
Option 1
Using #media for mobile devices. You no need to use this cloud image for mobile devices.
#media (max-width: 767px){
.bottom-cloud{
display: none;
}
}
Option 2
Make top-container class overflow hidden.
.top-container{
position: relative;
padding-top: 100px;
background-color: var(--biru-muda);
overflow: hidden;
}
Hope this help!.
its your .bottom-cloud in the top-container what causes the issue.
<img class="bottom-cloud" src="img/awan.png" alt="">
it has a position:absolute with position out of the viewport which causes the viewport expanding.
Add an overflow:hidden to the top-container and it wont expand it.
I built this very simple site for work and I found an issue related to the top navigation bar when resizing on mobile (please note there is no mobile version of the site, nor will be).
When resizing on mobile screens, the navigation bar remains fixed, while the content can be moved. This means that, while the navigation bar stays stuck at the top left corner and partially blocks the screen, the text moves freely under it. Please refer to the screenshots below:
Mobile: Example 1
If you check the source code, the top navigation bar is set to fixed. If I remove this line, resizing on mobile works fine, but the top margin specified for the content (so that it doesn't overlap with the navigation bar) becomes huge.
Changing this margin, however, affects the navigation bar when resizing the window on a computer, as you can see below:
Desktop: Example 1
It's been many years since I last worked with html and css, so please excuse me if I'm missing the obvious.
How can I find a solution to this?
This is happening because you given width and max-width 100% to your top class, If you want to fix this in mobile devices you need to write media query
Try below code to your css
#media (max-width: 500px){
div.top{
width: auto;
max-width: none;
}}
if you want to show navigation in mobile view then use below code.
#media (max-width: 500px){
div.top{
position: relative;
}
div.normal{
margin-top:200px;
}
ul.menu li{
float: none;
}}
I have been having a strange issue with my website http://www.restowarehouse.co.uk
When the desktop version of this site is viewed on mobile, or you recreate a mobile resolution using the developer tools on chrome, a large inexplicable space appears. How do I get rid of it?
Example: http://www.drivewayrestore.co.uk/images/Unwantedspace.png
Your #container has a width of 1299 pixels. If you visit the page with a 600 pixels width screen, it takes only the half of the page in the screen because it has 699 pixels more to the right.
Change your css to
#container { width: 100%; }
And it works.
#AlastairNixon:
You need to do two things in stylesheet
body { background-size: 100% 100%; }
#container { width: 100%;} --> As your current width is 1299px.
Just another advice: try using clearfix for parents of the element having float.
I have a section in the header on the right side that scales down fine with the exception of how the right block of images are moving. The images resize just fine, but once I begin to scale down, They push into the logo div and then are placed above it.
How can I position them to place under the logo and line up accordingly while staying in the header and without just turning the display to none when I reach a certain screen size?
Here is a link for the jsbin of those images/badges. The live site is in Wordpress and the code is too much to post. Maybe if you just use Firebug or the dev tools.
This is the live version of the site.
Also as a sidenote: I have the -190px margin enabled on the live site.
Here is a screenshot just for reference:
I managed to fix the issue. I added a separate media query like so:
#media screen and (max-width: 479px) {
.badges-container {
position: relative;
text-align: center;
margin-top: 0px
}
.badges img {
width: 19%;
}