I have a website (templenaylor.com) that displays fine on firefox or chrome on macs, but on certain pcs displays like so:
How it should display:
I know this is somewhat a vague question without a codepen but was wondering if anyone has encountered this problem before or if it is just my version of chrome. I do not have a lot of PC's to check the site on so I am asking here for input.
Thank you!
Basically, different pc have different length and width . for an example, small imac will display your website just fine, where else a bigger version 27inch imac have different width and size, therefor , it will react differently on screen.
You need to check your css, for an example, its a good practice to use percentage for responsive website..But at a certain situation, its a a good practice to use # media rule. you could set your css to #1300px width(#media rule), Study on this http://www.w3schools.com/cssref/css3_pr_mediaquery.asp regarding the #media rule. Im pretty sure this will solve your problem as i had previously face this problem with my last project. But if that doesnt solve your issue.
You might want to explore more on webkit extensions. https://developer.mozilla.org/en-US/docs/Web/CSS/Webkit_Extensions
i hope with these. it will solve your problem. Cheers.
I viewed this website in Chrome(v56.0.2924.76) on a laptop and it produced the second screenshot (the one you want). However, I believe that the issue relates to the header background image height. You have it set to 100vh, but try 100vmax, which is relative to 1% of viewport's larger dimension. Here's the CSS:
#header {
height: 100vmax;
}
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 have a question what I couldn't find an answer for.
Google Chrome has an option to change screen size so you could see if your site is responsive. By setting it to 1366x768 it seems to be perfect, but if using laptop/changing screen resolution to 1366x768 it doesn't fit suddenly only if changing zoom value to 80%. I know I'm not providing any code here, just wondering why such thing is happening?
In my experience this has been due to using absolute pixel values and font sizes. I personally have found using em and percentages % rather than px helps at times as well as using a responsive grid system, whether directly coded in CSS or through something like Bootstrap. I would highly recommend Bootstrap as it is very easy to get into and will save you tons of time.
In the following link there are strange black patterns at the top of the page that only show up on mobile devices, I checked on 2 different android devices that had the same case, but on my desktop computer it does not show up even when using different viewports.
The link: http://dshift.totalh.net/blog/solving-the-mossad-challenge/
A photo of the strange phenomenon:
There are weird black patterns on the top as you can see. How do I go about removing them? I have yet to identify the cause of the issue as well.
EDIT: I changed the picture with a higher res version, though the border had receded a bit, it's still there unfortunately, and making the image any larger will start to affect load performance. I'll update if i find another solution.
I think it's, as i've told in the comments, something with the resolution of the image. You're able to check if it is the background-image causing the problem by changing the background to e.g. the following:
body {
background-color: white;
}
I've found a TON of posts and questions on mobile width/height. The top two answers are to use media queries, or to use vh/calc(). The other issue I've seen numerously is the mis-understanding of width/height(100%) vs width/height(auto) with the use of margins/padding/borders. What I've run into seems to be unique, but with the flood of mobile issues, I have a feeling somewhere out there is an answer to this already. If you've seen this, please point us to the correct question/answer.
I've created a black glass along with an element to use as an image previewer. The glass and image have width("100%") and height("100%") without any padding, margin, or border. On a computer, it looks perfect. On a mobile device, the dimensions can get thrown off and the background shows through.
If I remove the height("100%") on images that are taller than wide, it resizes to the entire element. If an image is wider than tall, removing the width("100%") causes it to grow appropriately again too. However, this doesn't solve my issue because without a width or height cap at 100%, larger images will overflow.
I first noticed this issue on my cellphone (android) and have had no issue repeating it on Chrome's emulator. I have uploaded a quick recording of what I am seeing to screencast.
It's been suggested that a css rule is leaking from a parent element. Chrome supports the style 'all: initial;' to reset the css. I also manually reset my css with this method. Resetting the styles did not change the issue.
Once again, thank you for taking the time to look at my issue!
I found a solution to scaling my web page down here. However, I noticed that this solution messes with jqplot's highlighter and zoom functions. Is there a solution that doesn't interfere with these functions?
The only way I can think of with out seeing your code, and without using the solutions provided by the other question, is to add separate size percentages to each element on the page. For example, adding font-size: 30%; will decrease the font size of all text in the element, so you could put this into the body styling’s. I don’t think there is a way to change all div's by a persent of their current size, without using zoom functions in css (I presume you have considered these as they are in the answer for the question you linked) but there is probably a way to do this in JS, by collecting the dimensions and timesing by an amount. You can just change individual sizes for each div though.
Hope this helps :)
Unfortunately, scaling and zooming is part of the function of the browser. This is necessary for screen readers and people with eyesight issues to zoom in.
When you try to take control with zoom, you will always be playing with compatibility and browser issues.
A suggestion? It sounds like your requirements are bogus in light of current internet-enabled mobile devices. A liquid layout is the current best practices for a reason.
EDIT: Have a look at http://alistapart.com/article/responsive-web-design