Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I'm trying to prototype project of mine (mobile version of message board). After few hours of html and css I've decided to check how it looks in Chrome (before it i'm was coding in firefox responsive design mode) and everything was smooth.
I can't figure out which css rules causes it to render this way. And why it looks fine only in FF responsive design mode. Thanks in advance!
firefox screenshot
chrome screenshot
prototype link, so you can inspect css
The difference looks like it is being caused by the lack of a viewport meta tag.
Add this to your head tag.
<meta name="viewport" content="width=device-width, initial-scale=1">
This tells the browser to render the page at the width of the device as opposed to trying to render the desktop version of the site and zooming out to fit all the content in the window.
Delete "height: 155px;" into
.homepage-gallery__block {
float: left;
width: 48%;
height: 155px;
margin: 0 1% 10px;
}
Related
Main idea
I have a web page with custom css files for different screens. After a lot of searching and using responsive simulator testers that show no errors, some iPhone users complain about broken page style.
Code basics
Page has 2 custom CSS files for larger (>960px) and smaller(<=960px) screens.
I have this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
This is my page to test
Test and results
On browser testing for smaller screens (even down to 260px width) show no problems. Also validated the CSS here.
This is how it looks for some people with new updated iPhone 6 browsers (Safari and Chrome have the same result).
All the other phones (as far as I know) don't have this issue.
Relating to what others said about the 150 % width: there is some JavaScript setting that width in js_compressed.js... it's compressed so it's difficult to tell what the point of it is, but here's what it looks like pretty-printed in Chrome Devtools:
b() && ($("section.top").css("width", "150%"),
$("footer").css("width", "150%"));
Right below it there is some stuff related to FancyBox (this, I presume)... maybe could be related to that?
Your header (and possibly footer) are set to a width of 150%?
That's what's breaking your page...
It's creating a wider section, and therefore breaking the main section of your site.
Try removing the hard width of 150%;
max-width should never be more than 100%.
Since I don't have specific code snippet to detect your problem thus It's tough to identify which part of your code creating this issue so I am not able to answer your question specifically also I haven't got this thing on my devices but I have something for you that you might need to look
Check out this SO post check out the first answer specifically it has all the hacks that you need to know for iOS safari browser.
With this I hope that my try will do the trick for you :)
Please try
#top_block_wrapper, #secondary_block{
display: block;
}
Instead of display: table-cell
Simple worker bee with little/no web dev experience here.
I'm having an issue with the eCommerce store I'm helping run. The page contains a Top Seller box that should be on the right side of the main content, and it appears correctly in both IE and Firefox. See here. It does not appear correctly on Chrome (checked multiple computers in store), as seen here. When I zoom out to 90% in Chrome, the page appears correctly. How can I correct this issue so that the web page in Chrome displays correctly at 100% zoom?
I would suggest making sure your html and body are set to full width. You could use something like this:
html, body {
width: 100%;
}
You could also try using this meta tag in your head:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Good luck, and if you need more specific answers, try to find some code to add to your question.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I have some GIF files on my site which are all rendered extremely smooth on every browser excluding FireFox.. the following screens depict what I mean:
EXAMPLE 1
Here is rendering of a GIF on basically Safari/Opera/Chrome.. very smooth.
Here is the rendering on FF.. very choppy and semi distorted lines.
EXAMPLE 2
Rendering on Opera/Safari/Chrome, once again very smooth.
Rendering on FF, once again very choppy.
Is this a browser defect that has to be adjusted with settings or? So far I have negated this by adding some browser sniffing logic (which I don't want to do) and placing in a smaller rendition of the GIF. Any suggestions?
UPDATE
Here are the actual GIF's.. open this question in FF and please provide feed back
Be sure that your image is 100%. Sometimes the “halve pixels” can cause troubles on image rendering.
Also, some browsers and some versions tend to display the image differently. At that point, I don't think there's anyting that can be done about that.
Hope it'll help!
There's a possibility the browser is resizing your image. To avoid this, it's advisable you make the dimensions for your web browser 100% instead of setting width = 1024px. This may not fix all the issues but would at least help fit the GIFs properly into the screen.
Google Chrome Version 78.0.3904.108
Firefox Version 71.0 (64-bit)
Unable to find any difference on latest versions.
I know that this is more of a hack than a fix but you can add
in your css
.element{
filter:blur(0.33px);
}
I use this on fonts & some images to make them appear smoother, different elements need different amounts of blur but anywhere between 0.24 & 0.54px usually makes fonts and images a lot smoother & removes some level of pixelation.. But I would suggest try the other answers first.
The browser may be resizing the image. Resized images lose quality.
Look up lossy images. This may help you.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
On http://quizdash.co.uk/ Internet Explorer got HUGE error: it scaling site content to all screen, but in develepment panel, it say that content not scaled and has original size.
http://storage2.static.itmages.com/i/16/0201/h_1454300006_8737908_ad9e854b85.png
Of course, scale option=100%.
Other browsers show site correctly.
Is this undocumented feature of modern IE? Can I with css/html make IE do not scale site?
It's not an error in IE or an undocumented feature.
In your vendor.css, the following CSS appears:
#-ms-viewport{width:10in;zoom:1;initial-scale:1;max-zoom:1}
#-o-viewport{width:10in;zoom:1;initial-scale:1;max-zoom:1}
#viewport{width:10in;zoom:1;initial-scale:1;max-zoom:1}
That's causing the page to scale with the viewport. The only browsers that support #viewport are IE and Opera Mini, so the page will only scale in those browsers. As far as the CSS is concerned, the page is displaying correctly in IE, not the other browsers, so your assertion that the other browsers are showing the site correctly is wrong. However I cannot comment on whether IE is "lying" about computed pixel sizes because I don't know how or if viewport scaling should affect computed values.
If you don't want the page to scale with the viewport, don't use #viewport.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I am working on a RWD site with a fixed side navigation that fits to the top of the page when viewed on anything smaller than an iPad. The problem I am running into is when I switch the view to vertical on an iPad the navigation menu on the top of the page disappears. This only happens on the iPad as far as I can tell.
(keep in mind this is still under development so if you see any bugs please let me know!)
You have in your style.css file set display to none when max-width is 768px, which is iPad's width on horizontal mode.
#media (max-width: 768px) {
[...]
.midnav {
display: none;
}
By the way, if you connect your iPad to the computer, then you can use the element inspector for your iPad if you open Safari and select on the Develop menu your connected iPad. This is very cool and very helpful.
At various points in your style sheet, you have your menu sections set to display: none;. You are then relying on #media rules to display them again, but they are falling through a few cracks (you are playing Russian roulette with them!).
You can test what's happening in your desktop browser. Slowly resize Chrome, and when you get to about the width and height of an iPad, you see all menus disappear. I recommend you use tests like this while setting up your #media rules.