Hello,

I have successfully upgraded my Joomla 2.5 site to 3.2.3. All seems to be working well. Template and t3 updated to latest versions etc.

But -- there's always a but or I wouldn't be typing here -- the slideshow in the background position does not display properly on phones. The image is pushed up revealing the background color #333. When the phone is viewed in a wide format it is a bit better. I'm not sure where in the css to modify this.

I have attached a picture -- the logo is in the right place but the green area should appear behind it. Here is the url: www.thelazyexplorer.com/

Thanks so much for any advice!

Joanne

Can you re-attach

Thanks
Paul

Sure. Here is the picture again.

With the background the slideshow is set to hide on mobile widths as it has the hidden phone class

@media (max-width: 767px)
.hidden-phone {
display: none !important;
}

I'm not sure I know what that means. How do I remove the class?

ok -- excuse my first reply! I removed the hidden-phone class from the module. The slideshow is now animating but the position is still not right.

Maybe if I create a new class?

@media (max-width: 767px)
.slidehow-padding {
padding-top: -30px;
}

Thanks!

The position of the images relates to the dimensions of the images I think so you need to reduce the background height using media queries and then perhaps move up the content

As the image is constrained more of the background shows underneath

#background{height:310px;}

This is the default value

Cheers
Paul

ok-- after hours trying to fix this -- I've decided to simply remove the slideshow from the phones and use a smaller logo, no background.

In the template manager under Theme I have enabled the small logo option and selected a different logo to use on small screens but the regular logo still shows up. Am I missing something? Do I need to add something to the css? I tried the following with no luck.

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
#logowrap > div.logo.logo-image > img {url(images/logo6-sm.png);
} }

I'll need to check on this and get back to you

Cheers
Paul

With small logo its not actually supported by any Joomla Bamboo template

Its a feature we don't support from the T3 plugin I'm afraid so it won't work - the template is due to be updated to the remove this option from the admin settings

sorry for any inconvenience

Cheers
Paul

Thanks for all your help on this!

Using a smaller or differently configured logo for phones DOES seems like a good idea anyway -- even if this feature is no longer available in the template manager. Can I achieve the same thing with css and media queries? Can you help me with the syntax?

Joanne

This is a bit beyond the normal css support we would offer
but in this case try this

@media (max-width:480px) {
#logowrap img {display: none;}
#logowrap h2 a{background:url(www.thelazyexplorer.com/images/logo6-sm.png) no-repeat 0 0; height:300px; width:450px;display:block}
#logowrap {margin-top:10px;}
}

Please note: the image path you have for the image was pointing to the css template file so to get this to work I've had to use an absolute url

I also did remove the existing code you had for this when testing in the browser

Cheers
Paul

"Please the image path you have for the image was pointing to the css template file so to get this to work I've had to use an absolute url"

meaning your path was wrong

Cheers

It works beautifully!

The fact that you go above and beyond makes Joomla Bamboo the best Joomla template and extension shop around!

Thanks so much again for great support and gorgeous products.

Joanne

You're welcome

Good luck with the finished site

Cheers
Paul