Here's a tough one…

In this template, from what I can see, there are three layouts, which I'll call Desktop, Tablet, and Phone. On the desktop layout, everything is where I want it. On the other two layouts, they're not.

Does anyone know how to change this? Paul was awesome and helped with a couple things. I'm now looking to finish the job.

I've attached screenshots showing what things look like, and how I would like them to look. I don't expect anyone to tell me how to do all this, but perhaps someone could please explain the process so I can do it?

Thanks and cheers,

Bill

Hi Bill,

You are looking at media queries for both mobile and tablet size
You will be overiding some media queries of the tablet with some of the mobile

As if you line text up on the right its hard to avoid text and or menu overlapping the logo

Not easy this

my thoughts from a tired brain

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

#navigation ul{ margin-top:30px; margin-bottom:0 }
#tagline {margin:0 auto; text-align:center; float:none}
body .logo #tagline span {float:none;}
#paneltrigger {display: none;}
#midCol, #mainWrap #midCol.zen-content {margin-top:70px !important;}
.search input {margin-top:10px;}
}

@media (max-width: 600px) {
body #tagline {float:right; text-align:center; margin:0 auto}


}

Its not ideal and doesn't really look like your pic that much

Its also done on a high res desktop at 3am so please test it bearing that in mind

Cheers
Paul

It well be that the mobile is overlapping

- the second media query is trying to avoid it - looks ok on a desktop at 480px but may look terrible on a mobile

Dude, one is perfect, and the other may just give me enough information to figure everything out. I don't know how all those brains fit in one head, but thank you very much. I'll let you guys know what I come up with—thanks for giving me the tools!

Cheers, Bill

No problem

not easy

Cheers
Paul