Forum Support

Shape 5
March 18, 2024, 10:20:58 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: SOLVED: Firefox/IE9 image resize problem  (Read 808 times)
bustebarte
Jr. Member
**
Offline Offline

Posts: 18



« on: September 18, 2013, 07:24:51 AM »

Hello

I just found a Firefox/IE 9 resize problem on my site. I never (rarely) use Firefox or IE 9, so I have not noticed this before. I usually use Mac and Chrome.

I am displaying 4 news articles on my front page - including an image preview. This preview image is beeing resized on all other browsers.

See example here: http://footvolley.no/

This also happens when I enter the article in question. The image does not resize properly.

See example here: http://footvolley.no/index.php/nyheter/8-siste-nyheter/346-video-fra-nm-pa-nordfjordeid-2013

I have uploaded the images in each article using the IMAGES AND LINKS tab - and I upload an image which is bigger than on the website. I am using INTRO IMAGE and FULL ARTICLE IMAGE.

System
Browser: Firefox 24.0 (same with version 23.1)
Browser: IE 9
OS: Windows 7 Enterprise Service Pack 1 64-bit

Would appreciate any help on this topic.
« Last Edit: September 26, 2013, 05:25:04 AM by bustebarte » Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #1 on: September 18, 2013, 04:27:26 PM »

Hello,

The "Intro Images" and "Full Article Images" will appear exactly at the image size you specify. The responsive features won't target these images as they are controlled by Joomla itself. If you wanted to specify dimensions for this you would add some coding targeting the following elements.

.img-intro-right img, .img-fulltext-right img {

-Mike
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
bustebarte
Jr. Member
**
Offline Offline

Posts: 18



« Reply #2 on: September 19, 2013, 06:14:12 AM »

Ok, thanks for that.

It still raises the question: why does it work in Chrome?
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #3 on: September 19, 2013, 04:54:13 PM »

Hello,

Not sure on that. Chrome might have some specific image settings that is resizing it accordingly. Every browser tends to handle certain items whether it would be fonts or images slightly differently.

-Mike
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
bustebarte
Jr. Member
**
Offline Offline

Posts: 18



« Reply #4 on: September 20, 2013, 12:28:54 PM »

Do you, by any chance, have a suggestion on what kind of code I should add to the CSS?

I tried this with no success:

max-width: 100%;
height: auto;
« Last Edit: September 20, 2013, 01:54:06 PM by bustebarte » Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #5 on: September 22, 2013, 05:35:05 PM »

Hello,

I took a look at your site again in 3 different browsers and they seem to be appearing the same. Have you already fixed this? Do you have any steps to replicate if not?

-Mike
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
bustebarte
Jr. Member
**
Offline Offline

Posts: 18



« Reply #6 on: September 23, 2013, 07:52:23 AM »

Hello,

I took a look at your site again in 3 different browsers and they seem to be appearing the same. Have you already fixed this? Do you have any steps to replicate if not?

-Mike

Hi, again. And thanks for helping me out.

I have not fixed this yet, but I have tried - with no luck. My site is fully responsive (the images) on my Mac with Chrome and Safari - but not Firefox. It is not responsive on Windows 7 Enterprise with IE or Firefox.

I am "testing" how responsive it is by changing the browser size - I am dragging the size up and down. When I do that you will see that the images do not resize properly. With Crome and Safari this works perfectly.

Have a look here: http://footvolley.no/images/illustrasjon/footvolley_responsive.jpg
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #7 on: September 23, 2013, 04:24:28 PM »

Hello,

I sent an email to the designer to check it out. I see the image size calls are there but not sure why it isn't working properly in Firefox but is fine in the other browsers. I will let you know once I get a response.

-Mike
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
bustebarte
Jr. Member
**
Offline Offline

Posts: 18



« Reply #8 on: September 25, 2013, 02:21:35 AM »

Thanks for staying on top of this.
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #9 on: September 25, 2013, 06:43:10 PM »

Hello,

Add this to the custom.css file.

.img-intro-right, .img-fulltext-right {
width:100%;}

-Mike
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
bustebarte
Jr. Member
**
Offline Offline

Posts: 18



« Reply #10 on: September 26, 2013, 05:23:38 AM »

Hi, Mike.

Thanks for the suggestion. I tried it with no luck. However, I started looking into the options in the Vertex framework (Extensions->Template  Manager->Traction - Default) and found out that I have to enter 100 in the Images Percentage Width area. See example below. This is located under General.

See solution: http://footvolley.no/images/illustrasjon/percentage_width.jpg

After I did that, and saved, everything showed up the way it should.

Thanks for the help. Hope this will help others with the same problem. 
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #11 on: September 27, 2013, 06:38:42 PM »

Alright,

Thanks for the update.

-Mike
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.