sorry this question was asked previously, it seems like I wasn't clear enough,
I do know the problem of this scrollerbar is due to css, some tutorial said that width: 100% is the cause of the problem but by eliminating the width:100% still I ended up with the same problem.
I'll let examine my web app that I'm working on in a hope of some answer
http://www.kefet.com/content/videoview.html?pl=PLvnIwAWCv4j3xZdRkB2MwY8-l7_jz7ngy&v=alJoYgvcY9E&cat=sls_mo&plid=36
I found the problem, it was the margin-left:230 way over the container css class that I have created.
how to find problem like this: use the firebug to detect which css is causing the problem and edited.
Thank you
Related
it's been few hours that I am looking for the answer to my problem and I am starting to desesperate. I hope you could help me !
I am developping a personal website and I am working on the responsive. I don't know why, but on mobile, I can horizontally scroll, the body (or whatever this is) sticks out of the window. I've tried to place some box-sizing : border-box because I thought it would resolve it then I check 2x times my entirely code, trying to delete or add some elements but still no good result.
Given that I don't know where the problem is, I think it is easier if I provide you the url : right here. (Use the web developer mode of your browser to see the website on a mobile way so you can see my problem)
Hope you can help me, I haven't any other idea of what to do...
Thanks !
I want to start off by apologizing if this has been asked before. I tried to find the answer but nothing was popping out for me. I am still very new at coding and have hit a wall in my knowledge. I appreciate any help directly or showing me in the right direction.
We are having issues with the layout on different devices. The mobile site looks good, same with the desktop. However, between 768-799px, it distorts the site and then at 800-1300px it is distorted in another way, neither looks good. I have gone through and changed all of the #media queries to try to adjust it but have had no luck. I have attached two pictures of the different issues we are experiencing.
Thank you in advance!
Tablet view 768-799px
Over 800px
It is a little hard to tell exactly what is causing this without any code being posted, but flexbox is a great tool for this. https://css-tricks.com/snippets/css/a-guide-to-flexbox/ is a good reference. My understanding is you want to prevent overlapping items, and how I would use this to prevent that is by putting them in separate flexbox items within the same container. There are tons of great YouTube tutorials on this topic if anything in the link is confusing.
So working on this website and faced with an issue of blank space on the right side of the page on mobile view. I've looked at everything and still cant seem to get rid of it.
I deleted each section of the site hoping to find the area where the issue was (overflowing form something I thought) but it was always there so I don't know what to do.
[link removed] is the site on the dev server.
Im really stumped by this so hope someone can help me. Thanks in advance
The issue is visible only on mobile and almost no way to debug that (well there is a way, kind of a hard way to debug that).
Any long story short ... i suppose one of the page elements is not behaving as it should in mobile view. With this i mean, an element, element X for example is wider then the width of your mobile screen so it creates that white screen issue.
What im gonna propose here is not a 100% solution, is more like a workaround but it will work if the issue is what i supposed:
Apply this css rule on the body tag:
body { overflow-x: hidden; }
http://validator.w3.org/nu/
Copy Paste your url or paste your code (at the "Check by" dropdown) and you'll see unclosed elements.
Close your elements, I think there is the solution
Thanks to everyone for your help. So I found the issue, As Arber suggested it was an element behaving badly. It was the contents of the carousel overflowing causing whitespace to appear, so I was able to rectify the problem. Thanks again! Tthe validation helps with a few other side issues too.
I'm working on a hubspot project that I got pulled into last minute and am having a lot of trouble with a particular issue. The page looks okay fullscreen but on mobile, I'm getting some crazy margin that is making the site look super funky. I've searched and searched through the elements with google dev tools and can't find any culprit. I was hoping someone either knows a common problem with this on hubspot or would easily be able to help me pinpoint which element is causing the problem.
A link to the site is
https://www.modev.com/amazon-dev-day-casual-connect-sf
Any help would be greatly appreciated. I'm driving myself crazy at this point.
Thanks,
Jon
I don't know Hubspot's templates so it's hard to say for sure. But tooling around with your site I tried to force the width of the HTML using jQuery
var screenWidth = $(window).width();
$('html').css('width', screenWidth);
It worked enough to show me that when scrolling down the mobile site something's off with the header that's hidden and shows on scroll. Either the class below or it's parent might be a good place to look.
cbp-af-header cbp-af-header-shrink
On my clients website in all versions of I.E. I can see a white big whitespace I have searched everything divs for their height, display type, float, and also line heights but nothing seems to work for me.
I came across this post which has smiliar or same issue. He managed to solve it. I have already used what he used but still didn't resolved yet.
I have also addded a doctype for IE no luck. I' am using I.E. 10 to view my site currently.
More information
I have notices that it only appears after the LIKE and TWEET.
Please help.
can you try removing vertical-align property in you css for HTML. this should solve you issue.
I was not actually was able to find the correct solution for my problem but I had made workout of solve this issue. The problem was on AddThis LIKE AND TWEET Feature. Something was causing problem from it. What I did I made them hide in all versions of I.E.
if it is a page with no vertical scroll then try setting the position of your footer as fixed, top:100% and margin-top:"minus the height of your footer", this will do the trick!