Solved

Break a div out of its container with media query

Posted on 2013-06-28
7
283 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
7 Comments
 
LVL 57

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 57

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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Are these icons a web font? 3 29
alert on input text 2 42
Wordpress Responsive Web design and iPads 11 39
Responsive Image Distorting 2 28
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

734 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