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 give a module a fixed width in responsive layout mode.

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

First of all thanks for making such awesome templates!

I am using the latest Lifestyle template, sorry no link yet, localhost only. But I think my question is clear, I want to set a fíxed width for a module, while still using the responsive layout in general.

In particular my question refers to the zen tool Slideshow on the frontpage. The aim is that the I can also use non generic pictures, and instead of cutting the bottom half of my picture when resizing from wide to narrow screen, only the sides of the picture are cut off.

I hope you can help. Also I noticed there are some module suffies pre-programmed by you guys (like mobilehide etc.. is there a list where I can see all those? )

Thanks and BR
  • wabikan's Avatar
  • wabikan
  • 3 Month Basic
  • 18 posts
  • Karma: 0
The administrator has disabled public write access.
Ok, I need to adjust my question as I found out that it doesn't work to give the FP Slider Module a fixed width as a whole. (Because I need the Title div to adjust flexible.

So now the question is: How can I set the pictures of the Zentools Slideshow (only the slideshow!) to have a fixed width and be centered on the page.

I tried my best using Firebug/css but couln'd get it to work, hope you can help.
  • wabikan's Avatar
  • wabikan
  • 3 Month Basic
  • 18 posts
  • Karma: 0
The administrator has disabled public write access.
Hi there,

Is that for the images in the banner? We have some lines in the css/theme.css controlling that:

#bannerwrap
{
	position:absolute;
	border-bottom:8px solid #e9e9e9;
	width:100%;
	z-index:-9999;
	margin-top:-134px;
	overflow:hidden !important
}



#bannerwrap .row
{
	width:100%
}

If you remove the width:100% from the last rule that will make the banner the width of the template as set in the template manager. Does that do what you want?

Thanks
  • Anthony Olsen's Avatar
  • Anthony Olsen
  • LIfetime Developer - Big Bamboo
  • 23925 posts
  • 788 Thanks
  • Karma: 433
The administrator has disabled public write access.
Thanks for pointing me in the right direction. I solved it now, as follows:

By adding:

#banner .zenimage{display:inline-block; position:absolute; width:1400px; position: absolute; left:50%; margin-left:-700px;}

to the custom.css, I centered the slideshow and gave it a different "responsive behavior, where on a rezise from wide to narrow just the left and right edges are cut off.

Just in case this might help somebody...
  • wabikan's Avatar
  • wabikan
  • 3 Month Basic
  • 18 posts
  • Karma: 0
The administrator has disabled public write access.
Thank you for letting us know.
  • Zuzuzu's Avatar
  • Zuzuzu
  • LIfetime Developer - Big Bamboo
  • 1925 posts
  • 107 Thanks
  • Karma: 67
The administrator has disabled public write access.
@ wabikan - yes it has helped :)
  • 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