Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 288
  • Last Modified:

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><!-- end slider -->

      </div>
0
igloobob
Asked:
igloobob
  • 2
  • 2
2 Solutions
 
Julian HansenCommented:
http://css-tricks.com/resolution-specific-stylesheets/

In your media specific stylesheet (below a certain size) position the div absolutely or fixed.
0
 
igloobobAuthor Commented:
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!)?
0
 
Julian HansenCommented:
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.
0
 
GaryCommented:
One possible idea is have another container div (inline-block), have your title positioned against this and not the slideshow container.
When the screen is too small add a top padding to this container (using media queries), then your title will appear above the slideshow automatically
I'm implementing this method myself.
0
 
igloobobAuthor Commented:
Thanks for that suggestion Gary I will give it a go when I get a chance. What I ended up doing in the meantime was just create a mobile version of each page so I could just change the structure of the page in the html. It was only a fairly simple page so didn't take long.

Will definitely give yours a go though when I can.

Thanks :)
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now