Solved

Break a div out of its container with media query

Posted on 2013-06-28
7
278 Views
Last Modified: 2013-12-12
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
Comment
Question by:igloobob
  • 2
  • 2
7 Comments
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 39284206
http://css-tricks.com/resolution-specific-stylesheets/

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

Author Comment

by:igloobob
ID: 39284356
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
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 39284418
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
 
LVL 58

Assisted Solution

by:Gary
Gary earned 500 total points
ID: 39286033
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
 

Accepted Solution

by:
igloobob earned 0 total points
ID: 39289485
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Mobile menu navigation , its html and css 6 54
Install bootstrap locally using Angular CLI 2 44
CSS help matching specific span class 2 39
CSS Font Arial Narrow 1 26
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

919 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now