Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 6 years ago.
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.
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.
Improve this question
Not a Wordpress expert, but reasonably well versed in HTTP/HTML/CSS/Javascript/etc. Customer has a Wordpress site of not recent vintage, and I want to just get in, do the minimal required work, and get out. A page needs an image, so I upload it to the "Media Library". Push buttons and doodads to insert it into page, view the result and... the image looks blurry.
Some hours later, I understand there's a ton of Q&A about blurry images on Wordpress, but AFAICT they have nothing to do with my problem. When I view the image in a browser, it is reliably being scaled up by precisely 4/3 (1.33333...).
What drives me nuts is, I pick a browser, load the page, go into the console debugger, and it agrees both that the image is being rendered at 4/3, but also knows exactly what the correct original size is. Fine, but I should be able to see why it is rendering at 4/3. I cannot locate any relevant CSS parameter that is causing this. I have tinkered with enumerable combinations, including elaborations where I shove the img in a div and set the width of that div, etc. Every single time, the browser calmly scales the image up. In Firefox's console debugger, the "box model" view displays the actual original size rather than the scaled-up blurry size.
I feel I have eliminated PHP and Wordpress by just using Ctrl-U or the browser debugger to look at the result. But apparently somebody has managed a trick I don't understand, so I'm not sure whether to view this as a Wordpress question, CSS question, or what. So I'm flinging this question out in case the magic scale factor of 4/3 rings a bell with someone who immediately knows what the problem is. Let me know if other info is required to locate the problem.
I just checked it in IE11 on a virtual machine running Win10 and it was the correct size. It may sound daft, but are you sure you haven't accidentally enabled zooming in your browser?
This might sound simple-stupid, but sometimes, we all tend to miss something trivial:
While inserting the image/s into page, there is a column called ATTACHMENT DETAILS (extreme right). Down below on this column, there is a Size dropdown. Have you tried adjusting that? HTH.
Related
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 7 years ago.
Improve this question
I've just edit one page, and in my local computer its get perfect. I made the things in such way that the navigation menu still in a position in with it got a good look in contrast to the background image (transparent navigation background, with black characters over a part of the background menu where it is white). It's looking like this in my local machine:
But when I send it to remote servers, it get ugly, in unless two different ways, as follow:
This first, ugly, and;
This 2dn, even more ugly.
What could be happening?
First off - The second host is using an extra element, probably for tracking, or alike, which causes your style for div-elements, to apply to that aswell. You should use specific id's or classes for your elements, instead of just "div". Especially with "background"-properties.
You could solve this by adding following:
--some code--
<body><div><header></header>
--rest of the code
To
--some code--
<body><div id="container"><header></header>
--rest of the code
And changing in style.css: div {....to div#container {....
In my browser, the first link looks like your image, as it should, aswell.
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 7 years ago.
Improve this question
first time asking here, so hope I'm in the right place.
Below is a site I am working on:
http://iprotion.com/
I just built and tested a mobile friendly theme for it, but I discovered the 'responsive' does not work properly.
When you re-size the browser smaller (as mobile view) while opening that page: http://iprotion.com/ it doesn't work at all. The left sidebar is still in the same spot instead of relocate into above the main content of page. But, it's really weird, if you save this page on local computer and open the saved one by the same browser, resize browser, the responsive will work correctly.
The code of the saved one should be the same with the "online" one, right? Why doesn't the responsive of online one work?
Any ideas and helps would be hugely appreciated!
Thanks.
Simon.
I just checked it in Chrome, Firefox, IE, chrome's mobile test feature
-- it works as you describe it should in all three.
So the first thing to try:
Clear your browser cache and restart your browser and check again
Often when testing a website locally this isn't an issue, but when putting a site up live, it can be.
After making changes to a page or page layout, the previous version can stay stuck in your browser cache for sometime.
Are you sure you've added the responsive media queries to the stylesheet that is in the online version of your site? I see that the left sidebar and the main-content area have coffee-span-3 and coffee-span-9 classes respectively. So. there's no way for them to re-align the mobile browser?
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 7 years ago.
Improve this question
I added an background image inside a container that was smaller than the image. It was part of the plan. Even though it automatically rotated itself 90deg, without me touching anything (there was 3 other boxes with the exact same settings, not the same image though.). Any idea how to fix that, or what it is happening?
EDIT: Issue solved, Kyle Shrader told me to use and EXIF tool, which I did. That told me the photo was rotated 90 degree, in the metas, even though it looked fine front end. I used an exif editor and put it on Horizontal (normal value for a photo) instead of Rotated 90 CW.
If the image has EXIF orientation set, some browsers will interpret this and automatically rotate the image. You can use a tool like EXIF Data Viewer to quickly check that this is not the case for you.
If this is the case, you can solve the issue in your style sheets or in the image file itself.
To solve this problem with CSS, use the image-orientation css property to set your image orientation. image-orientation: 0deg; is what you could use, in your case.
To remove the EXIF tag from the file, you can use a tool like theXifer EXIF Purge
edit: replaced the originally linked online solution with an offline solution. With each there are concerns. Online solutions pose an issue to leaking company information or assets. Obviously you should only use trusted offline solutions, since this could pose a security risk. Thank you for the recommendation, #TomerOfer
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 7 years ago.
Improve this question
I'm having a great trouble with something. I made this website http://arnmusica.netai.net/ (Thats a current free testing domain) and when I click on "Productos" Tab, sometimes the elements (guitars) dont show, and sometimes they do. I don't know why this keeps happening. I tried to correct or modify lots of stuff of the css, html, and didn't work. The elements appear randomly when I refresh the page. The guitars should always be visible.
Please please please help me.
Thanks a lot.
Please isolate your problem into a jsfiddle or anything similar , so your answer can be useful in the future.
The width of the #scroller element is being overwritten by a misterious javascript plugin (simplyScroll.js).
The most common cause is:
The plugin is running before the load of the images.
See Javascript calculate image size, after image load
EDIT:
From jQuery simple scroll website:
Notes/issues:
simplyScroll jumping? Make sure you specify images sizes or start on
window load (Chrome is especially affected by this - it's just so darn
fast!)
http://logicbox.net/jquery/simplyscroll/#comments
EDIT2:
You can do on load, but has some caveats.
$( '.img img' ).load(function() {
$("#scroller").simplyScroll({
auto: false,
speed: 10
});
});
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 8 years ago.
Improve this question
I've taken out all of the styles on a page, and I'm still seeing this really odd font border issue. All of the text is really weighted, and I've ran out of things to debug. Here is what it looks like close up:
See the light blue and tan edges? That's what it looks like close up, but at 100% it just makes all of the text look really dark and weighted. Oddly enough the only fix I've been able to find is changing the z-index of a certain element(a header), but that won't work for the long term b/c it renders the header unclickable. I'm using Chrome 36 on OSX, and it turns out that this occurs even with as simple a page as:
<html>
<head>
</head>
<body>
link
</body>
</html>
Anyone have any idea?
That's not a border, that's the lcd smoothing algorithm. It works by assuming a particular orientation of RGB cells on the LCD monitor, so it can turn on e.g. 1/3 of a pixel at a time for a "smoother" font. You can turn off smoothing in Windows by disabling "ClearType", but know that your viewers are likely to have it enabled.
References:
http://szafranek.net/works/articles/font-smoothing-explained/
http://www.davidjnice.com/articles/windows7_disableClearType.html