Break an element out of its containers

[lukeurtnowski]

I have a site, www.urturt.com
There is a slideshow near the bottom

Its contained in 2 divs (

<div class="container">
  <div class="row">
    slideshow div
  </div>
</div>

)
I’m trying to figure out how to break that element out of both containers and position it below the header, like the slideshow on my site
http://www.teamluke.net/shopify/slideshow.html

Thanks…

[ronpat]

Have you validated the HTML on your page, yet?
It burps repeatedly at line 266, then teminates… “Cannot recover after last error”

You might want to validate the HTML on your “working” site, too.

Out of curiosity, how is this code created?

[lukeurtnowski]

Well, my brother had the “brilliant” idea that getting some idiots in Slovakia (or something) to install www.urturt.com
Its nothing but a shopify theme.

Now he wants to replace the picture in the header with a slideshow. I did some stuff on my server, http://www.teamluke.net/shopify/slideshow.html to sort of see if it is possible,

He likes the changes and wants me to put it on www.urturt.com, I really only want to add CSS to that site though and noticed the slideshow element (on www.urturt.com) is nested withinn 2 divs so I really dont know how to break it out and duplicate what I did

[lukeurtnowski]

I have an element im having a little trouble with, I’m trying to move the slideshow in
https://www.urturt.com/ (bottom)
by changing its the CSS of 3 elements to

header {
min-height:100px !important;
}
#pageheader {
padding-bottom: 0px;
}
.flexslider {
position:absolute;
top:70px;
left:
}

Doing that solved part of the problem. How can I (break) the element out of its containers, change the width/height so each image is as wide as the viewport and stays responsive. Whenever I try (like right:-100%) its responsiveness seems to go away when I decrease the size of the window.

but when I take a look at it to see how responsive it is, I get

why is the slider not flush up against the header. and is there a way to get the div id=“main”> to recognize the slideshow div?

Thanks
(And i have no access to the HTML and need to do this only using CSS)

[PaulOB]

I don’t think this is a viable proposition as you can’t simply drag elements out of their containers and place them somewhere else unless you have an exact structure that was built for that type of thing.

Your header is about 600px tall anyway and you seem to be sticking the slider on top of most of your parallax header? What is the point in that?

@lukeurtnowski

why is the slider not flush up against the header. and is there a way to get the div id=“main”> to recognize the slideshow div?

You could add padding to #main to keep it clear of the slider.

e.g.

#main{margin:0;padding-top:75%}

@lukeurtnowski

change the width/height so each image is as wide as the viewport and stays responsive

You can’t as the slider is contained by the position:relative that is placed on #main. If you remove the position relative from #main then the slider will go full viewport width but be massive and of course you lose the relative positioning from #main.

Although you can probably botch some things to work this does not look like a viable proposition to me and you need to construct the page with the slider in the right place to start with.