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.

How to move right column align to nav edge and keep left column aligned and reduce ZG2 col width

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

Sorry for the crazy long title. I got some code from you in a previous ticket that helped me to reduce the width of the white space between our zengrid2 modules. However, it also moved the content of the entire site a few pixels to the left and threw it out of alignment. This is my modules in the grid5 position.

Basically the idea was to change from this:
.zentools [grid-col] {padding-left: 3%; padding-right: 3%;}
to this:
.zentools [grid-col] {padding-left: 1%; padding-right: 1%;}

It worked really well except that it shifted everything. So, I tried to put the left padding back to 3% and that did align things on the left side again but then it pushed the zengrid2 module too close to the banner images that I have in the grid6 position.

So, I have removed the changes for now and what you see in the attached image is what it looked like at 1% for both settings.

The two things I hope to accomplish:

1) Align the banners to the right so that they will line up with the right column of the navigation bar.

2) Reduce the padding between the items in my ZenTools2 module without throwing the alignment of the grids off from the left edge of the navigation bar.

Any other fun ideas? My attachment should show where the two alignment points are that I am trying to keep.
Attachments:
  • scarney's Avatar
  • scarney
  • LIfetime Developer - Big Bamboo
  • 896 posts
  • 11 Thanks
  • Karma: 1
The administrator has disabled public write access.
I would also love to be able to align the banner in the header position to the right to line up with the edge of the navigation bar as well.
  • scarney's Avatar
  • scarney
  • LIfetime Developer - Big Bamboo
  • 896 posts
  • 11 Thanks
  • Karma: 1
The administrator has disabled public write access.
Hi Sean,

Can you add the link for the site?
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
BTW, on the right side alignment it works perfectly if I use a ZenTools2 module so the alignment issue there is something to do with the banners code.
  • scarney's Avatar
  • scarney
  • LIfetime Developer - Big Bamboo
  • 896 posts
  • 11 Thanks
  • Karma: 1
The administrator has disabled public write access.
I just discovered that the issue with the alignment on the right side only happens when the browser is sized wider than the width of the template. Somehow the navigation menu grows wider than the maxiumum template width.

So, this may just be something I have to live with?

Also, I can live with it if I cannot reduce the white space in the ZenTools2 grid without making the alignment go bad. :-)
  • scarney's Avatar
  • scarney
  • LIfetime Developer - Big Bamboo
  • 896 posts
  • 11 Thanks
  • Karma: 1
The administrator has disabled public write access.
Sorry Sean you've lost me

I thought I suggested adding the module id to

.zentools [grid-col] {padding-left: 1%; padding-right: 1%;}
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Thanks Paul,

That is what I had added (.zentools [grid-col] {padding-left: 1%; padding-right: 1%;} ). However, I had just removed it before putting in this forum post. I just now added it back for you to see what happens. It will start to look like my picture that I attached. :-)

I am starting to think that anything we do to the grid columns margins will effect the alighnment. :-)

Sean
  • scarney's Avatar
  • scarney
  • LIfetime Developer - Big Bamboo
  • 896 posts
  • 11 Thanks
  • Karma: 1
Last Edit: 6 years 8 months ago by scarney.
The administrator has disabled public write access.
Paul,

Let's not worry about this forum post. I am fine with the wider spacing between the images. When I do that the template lines up just fine. :-)

That said, you can probably add the following:

.zentools [grid-col] {padding-left: 1%; padding-right: 1%;}

and then you will probably see the modules all get moved to the left of the menu navigation bars left edge. :-)

Sean
  • scarney's Avatar
  • scarney
  • LIfetime Developer - Big Bamboo
  • 896 posts
  • 11 Thanks
  • Karma: 1
The administrator has disabled public write access.
Hi Sean,

I thought I suggested an alternate style - this one

#zentools-294.zentools [grid-col], #zentools-295.zentools [grid-col], #zentools-296.zentools [grid-col], #zentools-297.zentools [grid-col], #zentools-298.zentools [grid-col] {padding-left: 1%; padding-right: 1%;}

so it doesn't include all modules just the modules with these specific ids

so not all modules are affected
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
I did try that code as well. It had the same results. But, you are probably right that it is only effecting those modules. :-) But, I believe I am just going to drop this requirement which was to reduce the white space between the images. They look pretty good now. Thanks so much for helping with this!!!

Sean
  • scarney's Avatar
  • scarney
  • LIfetime Developer - Big Bamboo
  • 896 posts
  • 11 Thanks
  • Karma: 1
The administrator has disabled public write access.
Hi Sean,

I think that is probably wise as other wise you would need to adjust some column widths using

I think for the header it would be

@media screen and (min-width: 787px) {
.zg-col-8 {width: 68.66666666%;}
}

but it would be complicated as it may have required several styles dealing with various media queries

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
The following user(s) said Thank You: scarney
Good News Paul,

I found a very good solution for this issue of the margins. I changed the module type from Grid to Carousel and then turned off all the carousel settings and the margins all narrowed exactly like I was hoping they would without throwing off the grid. Yay! :-)

samag.cloudaccess.net/
  • scarney's Avatar
  • scarney
  • LIfetime Developer - Big Bamboo
  • 896 posts
  • 11 Thanks
  • Karma: 1
The administrator has disabled public write access.
Nice one

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
  • 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