Support Forum

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

Nebula Tempate, Tablet View: Nav menu item misplaced & slider items stack

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

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
  • AquilinoArts's Avatar
  • AquilinoArts
  • LIfetime Developer - Big Bamboo
  • 286 posts
  • 4 Thanks
  • Karma: 2
The administrator has disabled public write access.
Hi Maria,

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

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Yes, I can. Glad I took those before my free subscription to Browerstack died. ;-D

They are attached.
Attachments:
  • AquilinoArts's Avatar
  • AquilinoArts
  • LIfetime Developer - Big Bamboo
  • 286 posts
  • 4 Thanks
  • Karma: 2
The administrator has disabled public write access.
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
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
Last Edit: 7 years 5 months ago by manh.
The administrator has disabled public write access.
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;}

}
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
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?
  • AquilinoArts's Avatar
  • AquilinoArts
  • LIfetime Developer - Big Bamboo
  • 286 posts
  • 4 Thanks
  • Karma: 2
The administrator has disabled public write access.
Clarification wise

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

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
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
  • AquilinoArts's Avatar
  • AquilinoArts
  • LIfetime Developer - Big Bamboo
  • 286 posts
  • 4 Thanks
  • Karma: 2
The administrator has disabled public write access.
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
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
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
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers