asked on

Break a div out of its container with media query

Hello,

How can I break a div out of it's container div at smaller screen sizes with @mediaquery?

I have a nav box and also a title panel that overlays a responsive image carousel. On smaller devices such as the iPhone, the nav and title obscure too much of the image so I want them to break out and come above (nav) and below (title) the carousel.

The carousel is responsive so I can't position the title box absolutely I don't think?

<div id="slider-container">
       <div id="nav-container">
       <nav-bar>
       <ul>
       <li><a href="commercial_grounds_maintenance.html">COMMERCIAL GROUNDS MAINTENANCE</a></li>
       <li><a href="private_garden_maintenance.html">PRIVATE GARDEN MAINTENANCE</a></li>
       <li><a href="garden_design.html">GARDEN DESIGN</a></li>
       <li><a href="landscaping.html">LANDSCAPING</a></li>
       <li><a href="forestry.html">FORESTRY</a></li>
       </ul>
       </nav-bar>

       <div id="text-box">
       <h1>CREATING HORTICULTURAL EXCELLENCE FOR OVER 30 YEARS</h1>
       </div>
       </div>

       <div class="slider-wrapper theme-default">
       <div id="slider" class="nivoSlider">
       <img alt="" src="images/home-pics/Home1.jpg" />
       <img alt="" src="images/home-pics/Home2.jpg" />
       <img alt="" src="images/home-pics/Home3.jpg" />
       </div>
              </div>

      </div>

Julian Hansen

http://css-tricks.com/resolution-specific-stylesheets/

In your media specific stylesheet (below a certain size) position the div absolutely or fixed.

igloobob

ASKER

it already is absolutely positioned to get it sit int he right place over the carousel. If I make it fixed below the required screensize it won't work because I don't know the height of the carousel (due to it being responsive) so I can't know the exact distance I need it from the top of the page.

Unless I am missing something (quite likely!)?

Julian Hansen

Sounds like you are going to have to look at a scripted solution.

Try JQuery and trap the resize window event. You can then calculate the height of the carousel and position accordingly.

SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

igloobob

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial