Hey Paul and co,

Still working on lioramondlak.com (login details are the same)

I have been looking over the mobile styles... and because I chose to use a zentool banner (slideshow) with a title (bounceInLeft style which usually have a margin-bottom: 60px; which pushes it up on the page), it doesn't adapt to cell phones. I found the bounce left style and created a #slideshowwrap h1 style to try and affect the cell phone style, but not having much success. Any ideas?

@media (min-width: 320px) and (max-width: 430px) {

.bounceInLeft {
margin-bottom: 0;
margin-left: 60px;
font-size:80%;
}
#slideshowwrap h1 {
margin-top: 20px;
margin-bottom: 0;
font-size: 16px;
margin-left: 30px;
}
}

@media (min-width: 230px) and (max-width: 320px) {

.bounceInLeft {
margin-bottom: 0;
margin-left: 60px;
font-size:80%;
}
#slideshowwrap h1 {
margin-top: 20px;
margin-bottom: 0;
font-size: 16px;
margin-left: 30px;
}
}

I also tried turning off grid 1 for all designs except mobile under Responsive Layout, but it just messed up the whole template, so had to drop that idea. How else would I go about adding a special banner setting just for smaller devices. I thought I'd make a banner with the text in the graphic to save myself some trouble, but don't know what style to use to add a background image.

Appreciate your help so much as always,

Nya

Hi Nya,

Can you remind me of the details or where I can find them if on a ticket?

Cheers
Paul

Hey Paul,

Ticket was called entitled: "Zentools thumbnail navigation styling issue?" It has been closed though.
Hope that info will suffice.
Nya

Hi Nya

Yes thanks found it

What version number of the template are you running?

Cheers
Paul

Template Information

Name: New Lifestyle
Version: 2.0.4
Released Date: January 2013
Author: Joomlabamboo


Framework Information

Name: T3 Framework
Version: 2.1.6
Released Date: May 09, 2014
Author: JoomlArt.com

Right I'll talkt to anthony about this next week

I've been looking at media queries with your custom.css style removed for it

@media (max-width: 1500px) and (min-width: 800px) {
#maincontainerwrap.topmargin {margin-top: 250px;}
}

@media (max-width: 800px) and (min-width: 660px) {
#maincontainerwrap.topmargin {margin-top: 300px;}
}

@media (max-width: 660px) and (min-width: 500px) {
#maincontainerwrap.topmargin {margin-top: 100px;}
}

@media (max-width: 500px) and (min-width: 320px) {
#maincontainerwrap.topmargin {margin-top: 150px;}
}

I'd also look to wrap

.bounceInLeft {
margin-bottom: 60px;
}

in a media query

Cheers
Paul

Hi Nya,

Talking to Rob have you tried altering the ration of the original images so are a bit taller?

That could well be the easiest option

Cheers
Paul

Hi Paul,

Really appreciate your help. I haven't had time to play around with what you suggested. Actually having trouble understanding exactly what you mean.
What do you mean by "with your custom.css style removed for it"?
What do you mean by 'wrap in a media query'? Do you mean put .bounceInLeft in different media queries, I thought I did that?
I will try to make the banner picture a bit taller. Right now I am using the smart and resize function.
Thanks.
Nya

For the time being I'd ignore my comments and try alter the original ratio of the image between height and width

You have two snippets of css which affect any media query

.bounceInLeft {
margin-bottom: 60px;
}

and your #maincontainerwrap.topmargin value

So these may need to be adjusted or removed - you were also missing closing brackets on some media queries

Cheers
Paul

Thank you, Paul. I see I missed some brackets. Your info is very helpful. I will focus on those two css styles and changing the ratio of the graphic.
Thank you again.
Nya

No problem

Sounds like a good plan

Cheers
Paul