Posted by Barcelos on July 12, 2018 at 5:10pm
Hello All -- hoping to tap into the collective wisdom of the group.
I inherited an Omega 5 theme (Drupal 7x) with a slideshow (block view) within the default 960 grid. What would be the best way (if possible) to have this block extend the full width of the screen while other elements stay within the grid system?
RESULTS: I was able to extend the width/height of the region by changing the CSS to a fixed width/height but this is not the ideal solution. I need the slideshow to expand/contract with browser.
Any nudge in the right direction would greatly be appreciated.
Comments
In Omega 5 the Sections and
In Omega 5 the Sections and Zones are full browser width while the containers are constrained to the width of the grid and regions divide up that space. To allow a hero image or slideshow to go full width just put your image block in a dedicated zone and force the zone and region that has the block to full width so as to override your grid settings. Responsive images will then expand up in size. Here's an example:
https://celebratewomen.yale.edu. Note, this uses a custom grid that's 1284px wide, but it's still using the 960 grid system with the Omega 5 base theme. This should work with any size grid. Just keep your other page content in different regions that retain the normal grid settings.
The other thing you can do if you want an image wider than the main column but not full browser width is use negative margins on the image container to expand it's size. You can see this on the article pages on this site: https://news.yale.edu. The articles have a feature photo at top that overshoots the column width.
Victor Velt
Yale University Office of Public Affairs & Communications
http://opac.yale.edu
Many thanks!
I will follow your suggestions.