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 !
Related
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 2 years ago.
Improve this question
I have a problem whenever the website changes its size in any way, whether it be the size of the browser or if inspecting the code in the web browser, any change to the size of the page makes it look really really bad. I only started learning to code last week and I picked up the challenge "social proof section" on frontendmentor.io to practice my HTML and CSS. If anyone could take a look at it and tell me what is causing it I would be very grateful! also, its quite embarrassing posting this here as I'm a total nooby and with having only started learning a week ago, my code is obviously very very bad
website link: https://blakebutlin95.github.io/Social-Proof-Section-Challenge/
Github link: https://github.com/BlakeButlin95/Social-Proof-Section-Challenge/tree/master/css
also sorry about one of the empty codes in the css file, I didnt even realise it existed until a minute ago
You are using absolute positioning ,it is positioned absolutely with reference to the closest parent that has a position relative value , If there are no parent elements that has a relative position, then the absolutely positioned element will take its reference from the browser window.
The problem isn't the resizing of the page. The problem is that you have used absolute sizes. That means when I open the page it looks even worse because I have a different screen size. You have to create different sections and the implement the objects in there.
This is how it would look on a smaller pc.
Here a sketch how to build it properly.
Try to use for horizontal sizing only % and for vertical sizing px.
Use for the boxes the <div> tag.
Sometimes you have to set it to display: inline-block; so that multiple div's will fit on one line.
It is also important to not set a height because it depends always on the device how much space the text will need. Try to use instead more padding.
Update:
A more modern approach would be with flex-box or grid.
It is cause you're using the absolute sizes, this will give problems for different screen sizes. Try looking up flex box and apply it here.
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 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.
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
});
});