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 !
Related
I don't know if this is a normal error in web developer but if this happen lots of time when you are designing, can you give me advices on how can I fix this issue?
I often happened this to my website. when on the developer view, all css style are perfectly good and fit on the design I like, but when I check on the actual devices, some of designs are missing, and sometimes it didn't show up the exact design and css. I still don't know the reasons why in actual devices are different from the developer view.
the most difficult and stressful thing here, is when you trying to fix the issue but don't know where the error is, because in the developer view all css style and design is perfectly good and fit. so even you are trying to adjust some css code you still don't know if that is the exact css you need to work out.
can anyone give me advices how to work out with this kind of issue?
Usually these kind of errors happend when your styling is fixed. For example, do this:
width: 177px;
Instead of :
width: 177vw;
Also make sure your alignment is on point.
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
Im havin a big problem.
Im programming a website for a company in germany.
Since there are so many sites on the page i took an iframe in my index.html file instead of using a div tag because this would need a lot more time since i need to write the div stuff on every page.
Every Browser like IE,Chrome,Opera and also Safari shows the website like i want it to be shown.
But Firefox shows the iframe part in a small window in the left upper side of the window.
So you cant see any content or even 100x bigger than normally and in a quite small window.
So do I have to change anything in my code or do i need to add something?
The bigger problem is actually that the man who is able to start the server doesnt want to start it for let the website goin online because that doesnt work on firefox.
He explained the problem to me that way. but my program (mirabyte) shows everything in the right way (ALSO FIREFOX) so what can I do now because I need to let him try every small change i will do. So it would be nice if anyone does know the EXACT answer because he or she already had the problem.
Any ideas?
Thank you so much
Sasse
Make sure that if you have the iframe in any sort of container, that container also has the applicable height attribute. Also make sure that the iframe height is applied to both the HTML and the body tags.
Beyond that, we would have to see the part of your code where you're declaring the iframe to say anything more specific.