Not sure if I need to open a ticket for one or both of these tablet issues in the Nebula Tempalte. The url: www.secondgrowth.org.

In portrait tablet view, the contact gets shoved onto "line" below.
In landscape tablet view, any slider that is not an HTML module and has a grid, the grid items stack instead of resizing to align side-by-side.

I found that I couldn't adjust these things within the template manager/format area in administration and Paul has offered up some advice as to fixing the navigation menu item "contact". Should either or both of these be submitted as a ticket?

With Respect,
Maria Lara

Hi Maria,

Are you able to attach some screenshots of how it looks on the device?

Cheers
Paul

Yes, I can. Glad I took those before my free subscription to Browerstack died. ;-D

They are attached.

With the slider you have the option of making it fill 100% of the container in the zentools module

For an example of the grid

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

#zentools293 .grid_three {width:22% !important;}

}

In the template this would be 100% but as you can see this will look terrible on a mobile

so some times you will need multiple media queries or making them quite focussed widths wise

Menu wise something along the lines

@media (min-width: 780px) and (max-width: 1040px) {

#navwrap ul.nav > li > a, #navwrap ul.nav > li .separator
{padding: 0px 6px !important;}

}

The DevTools in Chrome is great. I can see that between 1040 and 1041px is when the contact item slips down. I think I need time to think about this. It is a lot for me to wrap my head around. I suspect that the fact that my client has 6 vs 5 items in their nav menu is creating this problem.

As far as creating multiple media queries because of the zentools module within the slider; I think I will have to do some educating/understanding of media queries to insure I don't mess things up further.

Quick clarification: when you set a grid at 100%, each grid item takes the whole space, right? So that is why in the above example, you set the width to 22%, so that all 4 grid items can be displayed in a horizontal row, right? But this will look bad on an iPhone so I have to set a min width so that it pops back up to 100% when on the iPhone/smartphone, right?

Clarification wise

yep indeed - you could create a different media query or use the width for the mobile as the min width

Cheers
Paul

Hi, Paul!

Take a look at url: secondgrowth.org and collapse the window to iPad size, portrait. I entered the media querie into my custom css and (using 45% width to get a 2 X 2) horizontally, but that same ugly last-item border is all funky. Remember the other post re: no border on the last grid item in sliders? Should I open a support ticket so that the true problem can be addressed, not band-aided?

With Deepest Respect,
Maria Lara

Hi Maria,

Bit late so it probably explains why I'm not quite following

Is it that you want the last image to line up under the one directly above?

Cheers
Paul

If this is the case try amending the media query

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

#zentools293 .grid_three {width:45% !important;}
#zentools293 .grid_three.zenlast {margin-right: 6%;}
}

I'd experiment to see if this works as I'm trying this on a desktop

Cheers
Paul