White space on the right of page on mobile devices - html

I learn to build websites. Now I'm making page to practice and I have a problem. I haven't already made it responsive but I've seen that below 630px width page isn't 100% width anymore. On the right of the page appear white space and I don't know why is that and how to fix that.
Can you help me?
screen of my problem

This happens if any box (e.g. an <img>, a <span> or a <table>) is wider than width of browser window.
Images does not shrink and words does not break by default. Boxes can not be smaller than all cells in a row together.
Utilize different responsive techniques to avoid overstretching of viewport.
img {
max-width: 100%;
}
a,
p,
span {
hyphens: auto;
}
/* wrap tables in <div class="horizontal-scroll-wrapper"> */
.horizontal-scroll-wrapper {
overflow-x: scroll;
}
Browser's built-in inspectors helps to find types of not shrinkable elements.

Related

Layouts changing drastically in mobile view

I have This site
It looks okay in normal browser from PC.
But whenever I switch to mobile view from inspect, it looks like this
http://azlily.bex.jp/eccube_1/html/
2: https://i.stack.imgur.com/uSHAe.png
Should I implement Media screen indivisually for all components in website? If Yes, then Why is title and some components are fit in mobile view.
You dont need to implement media screen for every item present. the trick is to make it responsive from the ground up, and then just make small alterations to the layout as it shrinks down if still needed. For example, take this news_area div section. You have it positioned in the center of its parent container - news_contents. But dont use fixed margins to center it, you want add css so that it stays in the center even when it shrinks down.
example:
.news_contents {
width: 100%;
margin: 0;
padding: 0;
}
#news_area {
width: 90%;
background: #d9d9d9;
margin: 30px auto!important;
}
[note:the !important tag is only needed here to override some of your existing css. Also this is just a rough example to show you the layout.]
With this added to your css, the news_area will always be centered in its parent div, and always have space either side. This is what i mean by coding it with a responsive design from the start. This section now doesn't need media screen to alter it again as it works on all device sizes with its original css.

Misalignment between centered Background image and centered DIV depending on browser width

I have a background image with a square which has the same size as a div that is covering this square. (There is a god reason for this not mentioned here). When centering this background image and the div, they do not overlap on certain browser width's. When re-sizing the browser, sometimes the background square is misaligned by 1 pixel. As you can see in the example below and in the JSFiddle, 1 pixel of the background square is visible sometimes when dragging the width of the browser.
Is there a solution for this? Why is the positioning between the elements not synced?
Try to re-size the fiddle-view-port width and you will see that the cyan background-square sometimes is visible when the misalignment occur.
JSFiddle: http://jsfiddle.net/jj3qxL3k/
Code:
<div>CONTENT DIV</div>
CSS
div{
background-color: yellow;
width: 800px;
margin: 0 auto;
}
html{
background: url(http://s29.postimg.org/42cuy8m7b/tester.png) center center repeat;
margin: 0;
padding: 0;
}
body{
margin: 0;
padding: 0;
}
Tried this without any luck:
/* Fix form centering background input chrome */
#media screen and (-webkit-min-device-pixel-ratio:0) {
html {
margin-left: 1px;
}
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
body {
background-position: 50.001% 0;
}
}
By the way... This happens for me in Chrome Version 43.0.2357.81 m.
This depends on how the browser handles uneven values and aligns backgrounds and content.
This happens when your container has an odd width value since your element inside the container has an even width value. For example if your element is 800px wide and the container is 855px wide then there would be 855-800 = 55px of space left around your element and now the browser has to divide that for the two sides. It would come down to 22.5 pixels per side but since it can't paint half a pixel it has to round the number. So one side of the element would get 23px and the other side 22px.
Now it could be argued that the background image itself is treated the same way so the alignment should be the same, but in fact this is solely up to how the browser is built so that's why you are getting different results in different browsers.
It's rather hard to suggest a workaround without seeing the actual project since it would probably have to be a different solution all together.

div content not responsive

I'm working on a site that was developed by another person. This site is designed with wordpress by override a base theme(blankslate). This is the link:
http://www.good-look.it
There is a problem. When you resize the browser window you can see that the div with white background is responsive, but its not. On mobile the problem is more visible. I can't find a solution. Maybe is a problem with the plugin that manage the image slides(NextGEN Gallery by Photocrati)?
The problem is in this file: http://www.good-look.it/wp-content/themes/blankslate/css/struttura.css
There are numerous CSS styles with "!important" on them. For example:
wrapper {
margin-left: auto;
margin-right: auto;
text-align: center;
vertical-align: top;
width: 940px !important;
}
The width of this container will always be 940px with the way you have it now. Turning this style off in Firebug "fixed" the "Brands" section. There are numerous problems in the CSS though that will affect responsive behavior.
First off, I thing we should be clear that the site is made with html, css, php, js etc --- so WordPress is really pretty irrelevant.
Most of the site isn't really planned in a way that is going to be responsive, but the specific problem of the white div, is that it is responsive, but the slider within - is not responsive, and uses absolute positioning --- so it's position is falling out of the parent div, and then making the content wider than the white div, and therefor wider than the window itself.
Did some quick styles in the inspector --- the slider's actually sorta "responsive."
replace
.wrapper {
width: 960px !important;
...
with
.wrapper {
width: 100%;
max-width: 940px;
...
and it will get you a little closer...
while designing a responsive site make sure that while defining width use %age instead of pixels like(940px). bcoz it arranges your div in %age according to your current device size but while defining width:940px it will take that amount of width irrespective of your screen size...

Unwanted white space on right site (small screen only)

I have a responsive site I am working on. It has a gap of white space on the right side of the screen at screen sizes roughly below 767px. This is the point it goes to the "mobile" layout. I had the same issue on the desktop size and fixed it by setting the footer to 99% width and it fixed the issue on the larger screen sizes. I tried playing with the footer width for the mobile size, but with no luck.
I have not idea what is causing this white space on the right side of the screen on smaller viewports. I tried the inspect tool in the console, but I couldn't find the problem.
I would post code, but seeing as I can't track the problem down, I wouldn't know what to post.
URL of page: http://sevenclanscasino.designangler.com/warroad/warroad-home
For anyone with a similar issue and struggling by hovering over elements in devtools, I came across this trick on another forum.
* { border: 1px solid red !important; }
This very very helpfully shows you all the boundaries in your project. In my case it was a grid overflowing its parent. Enjoy!
Try to change some elements into your css.
.row { margin-left: 0; margin-right: 0; }
header #top-nav-container #top-nav { width: 100%; }
header #top-nav-container #top-nav { margin-left: 0; }
another way (but please dont do that) :
body { overflow: hidden; }
When working on a responsive website, you should always set width values in % rather than px. So try setting with:100%
Hope this helps.

How to prevent horizontal scrolling on responsive webpage?

I'm using twitter bootstrap to make my app responsive. When I shrink the width of my browser window to the minimum size or view the page on a mobile device (iPhone, example), the user is able to scroll horizontally. The amount of horizontal scroll is small but I would like to remove it all together.
I believe it's due to the img container that I'm including, but I'm not here. The page's html is located here: http://pastebin.ca/2347946.
Any advice on how to prevent the horizontal scroll for the page while still maintaining the scrolling in the img container?
I had the same problem, and applied this to fix it:
body {
overflow-x: hidden !important;
}
.container {
max-width: 100% !important;
overflow-x: hidden !important;
}
To expand a bit, I only had the problem on mobile phones, so this is my final code:
#media screen and (max-width: 667px) {
body {
overflow-x: hidden !important;
}
.container {
max-width: 100% !important;
overflow-x: hidden !important;
}
}
I found the issues regarding this on Github, so I guess newer versions of Bootstrap have been patched.
i am pretty sure somewhere one of your child element is exceeding the width of its parent element. Check you code twice, if there any box-size of inner child elements is large because of one of the reasons like- when the box width including margin, padding, border go beyond the limit. And we possibly haven't added overflow: hidden; to its outer parent element. In this case they are considered reaching beyond their parent element and browsers show it with the scrollbar. So fix it via removing extra margins, paddings, borders or if you just don't want any headache, just try to add overflow:hidden; to the outer box.
The "overflow: hidden;" style is the remedy not the prevention.
If you want to prevent this you have to check your body elements which is larger than the body.
It happens when you take a div with some "padding" or "margin" outside ".container" class (twitter bootstrap).
So remove all padding and margin outside the container class.
It turns out I had zoomed in more than 100% that was causing the page to scroll. Cmd+0 helped bring the zoom to 100% which got rid of the scrolling.
Try to add (in the relevant #-rule) a max-width:
img {
max-width: NNNpx;
}
That'll prevent img from being too wide.