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.
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.
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 !
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
I am having an extremely odd issue creating a template for my zencart ecommerce website.
I find that many times I load the website my menu will break up and split over two lines as shown below.
The reason I find this behavior odd is that if I refresh the page it correctly displays.
Now I could understand how to fix this if it was consistently one way or the other but it seems to vary between the two with no obvious difference in the code... I am not sure if this is some sort of technical bug with chrome as I haven't been able to replicate it in other browsers however even if it is I really need a way of working around it. So I am curious as to whether anyone has had this issue before and if so how they got around it.
Link to live site: http://digitalmatrixonline.com.au/
Thanks Jason
If you add
white-space:nowrap;
To the div that contains the list it should prevent this, not sure why it's happening though.
Edit: here is a jsfiddle showing the technique http://jsfiddle.net/RM4S2/
Edit: No floats http://jsfiddle.net/BsGfu/2/
This is a really strange problem, and I was able to recreate the quirkiness in Chrome. While I don't know the direct cause of the issue, I think I found one way that works.
If you set the width of the second div within 'navEZpagesTop' that you are floating right that is wrapping,to 'width:485px;'. This seems to give the section room and does not wrap. If you want to leave more room for this expand without modifying the css you could set it to a much larger size, and float all the links inside of this to the right(instead of the left).