Hello,

Joomla! 3.1.5 Stable
Joomla Platform 12.2.0

One Page Version: 1.4.0
T3 Framework Version: 1.4.1

Live site: www.kronobergsgarden.se

It looks nice in Firefox 24 and i Chrome Version 30.0.1599.101 but i looks like shit in Internet Explorer 9 and 10.

Images will not resize in Explorer at all. I cannot figure what´s wrong but something is. I am thinking about resizing the images by hand (the drawing in the middle works, it is a small picture) but that will not work in the long run.

Any suggestions?

Regards

Björn

Hi Bjorn,

Thats an odd one.

Can you try adding this to the custom.css file to see if ti fixes the issue:

img[width],
img[height] {
max-width: none; }

Thanks Anthony

Thanks for a rapid response.

In:

/kronobergsgarden.se/public_html/templates/onepage/css

There is only a file called: custom_rename_to_custom.css

If rename it to custom.css and ad the code you suggested, nothing changes. The file is in the directory now.

Regards

BUB

Hi

Looking at the site in chrome and the images in chrome

www.kronobergsgarden.se/images/Vy_Grinden_2_.jpg
www.kronobergsgarden.se/images/Fasad_Kronobergsgatan_frilaggd_L.jpg

it looks like you are resizing in the browser e.g. the editor
is that the case?

IE has an issue with resizing in the browser e.g. the Twitter bootstrap code used in bootstrap doesn't work

The option is to either size the images as required in a photo editor or we ask provide guidance in removing the css added by bootstrap

The most efficient option is to actually size the images as required prior to article insertation as the resize will slow the site down

Cheers
Paul

Hello,

Yes the images are resized in the browser and as I mentioned its looks great in Firefox och Chrome.

Can you please guide me in the right direction regarding “removing the css added by bootstrap”?

Regards

/BUB

In this section of boostrap.css

img {

max-width: 100%;
width: auto \9;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}

Can you remove width: auto \9;

Cheers
Paul

Thank you, but no luck.

It´s now:

img {
max-width: 100%;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}

And the problem still exists.

Regards

/BUB

Definitely uploaded the new file?

As even with clearing browser data I can still see

img {

max-width: 100%;

width: auto \9;

height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}

/kronobergsgarden.se/public_html/templates/onepage/css/bootstrap.css

is changed for sure.

Regards

/BUB

/kronobergsgarden.se/public_html/templates/onepage/css/themes/sugarrush/bootstrap.css

and now it works!!

Thanks!

regards

/BUB

ah yes - sorry about that wasn't clear on which file to edit

Thanks for the update

Please be aware that you may have to edit this file again if you update the template

Cheers
Paul

I do not want to take advantage of your generosity with your impressive knowledge, but do you happen to know how to get a scroll bar on the pop up in position Panel1? Or adjust the width of it?

regards

/BUB

Think the easiest way would be to add a width for the panel

#panel.modal.fade.in {
width: 750px;
}

Althougth you may want to target this width with media queries as it may affect the display on a phone width

Cheers
Paul

The current setting is


width: 560px;

If you want to add the code above you will need to add it to the custom.css file

Cheers
Paul