margin:0 auto div improper arrangement on zoom - html

I have a navigation bar (actually two) - The one in grey(in the image below) and the white one below it. Both have a width of 1000px and have the attribute of margin:0 auto; in their CSS. Have a look at the live one in full screen at http://jsfiddle.net/M2bE2/embedded/result/ and http://jsfiddle.net/M2bE2/ for the output and the code
I hope that you have got a basic idea of idea of my navigation. Ok then, my problem goes like this. When you zoom out, the white-nav(The second one) gets improperly arranged. The image above shows the improper arrangement on zoom out. I cannot figure out the problem which is causing it. In the output, the disarrangement is after quite zooming out. But, in my real project the problem is even more(It gets disarranged after only a little zoom in or out ). Please analyze the code and tell me where am I going wrong. I have made the code in my fiddle clean for you to understand. Any help will be appreciated. Thanks in advance.


The issue is the login and register buttons. They are both floating right. Because of this they fill the space the bottom nav needs. If you limit their size, clear the float, etc it fixes the issue.
With them removed (easiest solution)
http://jsfiddle.net/M2bE2/2


Without the overflow:auto in the .white-nav's CSS-Attributes it seems to work.
.white-nav {
width:1000px;
margin:0 auto;
overflow:auto; /* Kick it */
}

Related

html grows vertical margin on touch screens

I have a WordPress site with a really weird issue.
the template on touch screens has a really large vertical margin out of the viewport
this margin doesn't exist when I use responsive browser simulation unless I activate touch simulation then somehow the page grows that large margin.
I've been poking around the inspector trying to find out which element is causing this issue but with no luck!
I even used overflow-x:hidden, max-width:100% and max-width:100vw and nothing seems to work.
here's the link hopefully someone can point out what my eyes are missing
طريقة قياس (طريقة-قياس-قيمة-مسافة-الحدقة-قيمة-ipd-الع)
irrelevant note: the site is in the Arabic language

Ok this may seem a little bit missy but as a quick solution I fixed the problem by adding this code in a media query.
html {
width: 100vw !important;
overflow-x: hidden;
}
Let me know if it works bro.
BS: the elements that are out of proportion is the navbar and the scroll to top as per attached so if you want a clean fix then fix their CSS as they are the root of your problem

empty Space on the right on my Website when using small Devices

i really hope someone can help me, since this Issue gives me headache already.
I got this Site www.Skilldate.de http://www.Skilldate.de an on the “Landing Page” if you decrease the Size of the Window (or directly open the Page via Mobile) you should already see the Problem :
There is always some unused Space on the right Side which makes the browser scroll on the width and i just dont know how to get rid of it, since it destroys the responsive feel
Iam grateful for every Inspiration
Cheers and regards
Thomas

You should have overflow-x hidden.
add in your css
#form1 {
overflow-x: hidden;
}

Page moving left and right while in mobile browser

I'm working on a project and I'm running into a big issue. I'm using bootstrap and I need the page to be full width. I'm using container-fluid. Everything works fine on desktop but on mobile the page moves side to side as if the container is bigger than the display. There is no scroll bar but you can move it around with your finger, it only moves a little bit but it is annoying. I don't even know where to check anymore. Its a site built on the Sparkpay CMS and it uses bootstrap 3. I'm not even sure how to refer to the problem, I've been looking for solutions online but I'm not finding a lot of posts similar to my situation.
The link is:
https://store55652.mysparkpay.com/
I know I'm supposed to post code, but I really am at a loss here. I've scoured through all my CSS(there are a few files) I cant figure it out. Any help here would be greatly appreciated.

This works for me
html, body {width: auto!important; overflow-x: hidden!important}

Seems even on desktop you can scroll left/right.
The simple way to fix is add:
html {
overflow-x: hidden;
}
But actually you should fix the overflow elements. For example you set padding left/right 0 for container-fluid, then you should set margin left/right to 0 for row as well(now is -15px). Otherwise it will out of the container.

I just had the same issue and I wanna emphasize what #larrylampco said once more:
There must be some elements overlapping on your actual pagesize which extends the pagesize to where this far you are able to scroll.
For me it was a tooltip I added for desktop screens. Forgot to remove it for mobile. The tooltip wasn't visible when loading the page on mobile, but it was there. That's why the page extended.

To figure out what was causing this, I put my desktop browser in developer view, chose mobile view and selected an iPhone, then "swiped" so my content was off-center. I could then hover the inspector arrow tool over the empty-looking margin until I found the culprit.
In my case, it was an issue with the mobile menu not collapsing perfectly on narrow screens.

Keep the position of the container(e.g. div, nav, etc.) static.
I had the same problem. Changing the container position in which the problem persist solved my issue.

It's all about margin, find out which main element has margin by using chrome devtool and make it margin:0;
or try this body {
margin:0;}

overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
Just Copy this code in body and text. I will help you

Flexslider width and space between images

I recently downloaded Flexslider and managed to extend the images, and I have two things I need help with. The first thing is that I want the slider to be full width, and apparently it is being blocked from that in .container by overflow:hidden. If I remove that piece of code, everything expands and the website doesn't look right, but it removes the space between the slider and the screen. Does anyone know how I can fix that?
And my second question is how I make a small space between the slider images. Here is an example of how I want it: Example
Here are my codes:
jsfiddle

Adding margin:0px; on the body fixes the problem.

chosen-select creates huge gap after footer

I have a chosen-select configured for single select with a search box in it. It kind of has a lot of options (in this question limited to 20 options) and it's positioned somewhere down on the page. If you select anything from the select box, it creates a huge gap under the footer.
I think the problem has to do something with these CSS lines:
div.content {
position:absolute;
}
div.filler {
height:35px;
}
I created a jsFiddle to demonstrate the problem. The gap in this fiddle, isn't that huge, but in my app it's way bigger than in the fiddle. I was unable to reproduce the same gap. The scroll bar is maybe 10px big after the selection in my app.
How can I prevent this behaviour?

Okay so the root problem is that you're layout is screwing up when the content overflows but that is another topic. I can give you a quick fix for now.
The chosen dropdown is being created with a ul.chosen-results. What you can do is, limit the height of that ul
Try and use this.
FIDDLE
.chosen-results{
max-height:200px !Important; /*Adjust max-height to waht suits you.*/
}