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 make other grids to use 100% width?

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

Hi,

Grid 1 uses 100% of the width, so I can put a stacked zen tools module in there and looks nice, but if I want to use a different grid, lets say grid9 so it shows in the middle of the page, it doesn't use 100%, it centers the content and the stacked module looks weird. How can I define a grid to use 100% in the layout?

Thanks in advance for the help
Attachments:
  • tsgpr's Avatar
  • tsgpr
  • 12 Month basic
  • 16 posts
  • Karma: 0
The administrator has disabled public write access.
Hi

Do you have a link?

or a bigger screenshot at higher resolution?

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Hi,

Sure, these are 2 screenshots. In #1 you can see how the banner uses the 100% for the "Island Life" section, that is in grid1, and in #2 you can see how the module is in grid5 and won't use the 100%.

Moving the same module from grid5 to grid1 makes it use 100% of the width.
Attachments:
  • tsgpr's Avatar
  • tsgpr
  • 12 Month basic
  • 16 posts
  • Karma: 0
The administrator has disabled public write access.
Do you have a link for the site?

Thanks
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
You can use this one: newsite.the2022actsociety.org/
  • tsgpr's Avatar
  • tsgpr
  • 12 Month basic
  • 16 posts
  • Karma: 0
The administrator has disabled public write access.
Hi There,

I'm being blocked by the firewall / admintools?

403 - Forbidden Error
You are not allowed to access this address.
If the error persists, please contact the website webmaster.

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
I'm in England if this helps if there is geo IP blocking
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Sorry, forgot about that. Please try now.
  • tsgpr's Avatar
  • tsgpr
  • 12 Month basic
  • 16 posts
  • Karma: 0
The administrator has disabled public write access.
Hi

Try adding

#grid6wrap .container, #grid4wrap .container {width:100%;}

to the template custom css file
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
this will give 90%

How does this look?

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Hi Paul,

Thanks for the help, the custom.css file worked, but as you said its using 90% only. Is it possible to use 100% either through this file or another method. We would like this section to look like the banner.

Thanks in advance
  • tsgpr's Avatar
  • tsgpr
  • 12 Month basic
  • 16 posts
  • Karma: 0
The administrator has disabled public write access.
The problem with making it 100% is it introduces scrollbars

#grid6wrap .container, #grid4wrap .container {width:100%; max-width:98%}

How does this look?
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Going for the 100% does get complicated as it will depend on the layout position widths you use

#grid6wrap .container, #grid4wrap .container {width:100%; max-width:100%; padding:0;}

The row has a negative margin on it so this needs to be nulled

#grid6wrap .row, #grid4wrap .row {margin:0;}
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Then it is a case of targeting the position directly

#grid13.col-lg-12.col-md-12.col-sm-12.col-xs-12 {padding:0;}
#grid21.col-lg-12.col-md-12.col-sm-12.col-xs-12 {padding:0;}
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
This does give 100% but if you change the width of the position in the responsive section this will need to be adjusted

I would test the stylings above on different browsers and devices as this section isn't really intended to be full width

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Thank you Paul, I will play with this a little bit more.

There are some blocks that have background color, and some others than don't. Is it possible override that through the custom.css file?

Thanks for all the help
  • tsgpr's Avatar
  • tsgpr
  • 12 Month basic
  • 16 posts
  • Karma: 0
The administrator has disabled public write access.
Yes you would target the grid wraps with a background colour

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
e.g.

#grid3wrap {
background: #796a6a;
}

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: tsgpr
Awesome, it worked like a charm!
  • tsgpr's Avatar
  • tsgpr
  • 12 Month basic
  • 16 posts
  • Karma: 0
The administrator has disabled public write access.
You're welcome

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