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
so my text isn't fitting onto mobile devices so I need to have a text break however, I dont want the text break on my browser, I only want it to appear on mobile devices. Is there any way to do this?
As was mentioned in the comments, there might be a better way to approach whatever situation you have, instead of what you are doing. You question is a bit too low on information to really know.
However, to answer your question directly, you can try hiding a <br /> tag at certain screen sizes using media queries
https://jsfiddle.net/ah7xgbp1/
<p>
This is line 1
<br /> This is line 2
#media only screen and (min-width: 768px){ // common tablet/mobile size
br {
display: none;
}
}
The first step is to detect if it's a mobile device (taken from here)
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {// some code..}
Inside that if statement, put code that adds a br.
$('somewhere').append("<br>");
There are ways to give html pages specific css or even certain html elements depending on the viewers device. Me myself have never done before in pure html/css.
(I am pretty sure this is a html5 and CSS3 feature)
http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript/ might be helpful.
Related
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.
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
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
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
I'm having trouble. I upgraded a Joomla 1.5 to 2.5.7. Imported all the content as well.
Some articles are built using HTML TABLE tag, rows, and 2 columns. Text in first column, image with correct HEIGHT/WIDTH attribute is in the second column.
See this page:
http://stageseminars.com/index.php/2012-10-24-18-26-22/how-to-tech/paperwork/108-lighting-board-notes
In FireFox, it's rendered beautifully, in Chrome, IE9, and Safari, the image is resized smaller, leaving too much space for the text that could be wrapped up more.
In the J15 version of the site, it was fine.
I tried playing with the CSS a bit last night, the best I could do to get the full size of image had the image showing offset way out of the table, and event the main-content container, played with min-width/max-width, percentage, even forced the px (I don't like it because maybe in the future the client would use different image size)
There's multiple articles like, I know this could be converted tableless somehow, style templating. But there's a better and faster way, I would appreciate it!
Please advise! If you need any more information, let me know as well.
Besides the css modifications dicussed in the comments, there is a function in http://stageseminars.com/templates/rt_kirigami/js/modules-height.js
that sets some styles for your images on IE9 and IE10.
'load': function(){
if (Browser.ie9 || Browser.ie10){
document.getElements('img').each(function(img){
img.setStyle('max-width', img.getStyle('width').toInt() || img.offsetWidth);
img.setStyle('width', '100%');
});
}
You can comment it, I already tested it on IE9 (removing that function) and it works !