harry_ord

Like this? .row { padding: 0; } It doesn't do anything.

Hello. This is my page: http://feriapixel.cl/anchour/ I'm using Bootstrap's grid system and whenever i use divs with the row class they get stuck in a container, and i want them to use be full width. This is one of my divs for example: <div class="content-seis" > <div class="row" > <div class="col-sm-6 showroom coffee-break" > <h2>Un coffee break con sabor y atención casera, para tu trabajo</h2> <p>Café americano, tapaditos, fruta, jugos, opciones vegetarianas y más. Tenemos promociones ya armadas, pero tomamos tu pedido con gusto.</p> <a href="#" class="btn btn-showroom" role="button">NECESITO COFFEE BREAK</a> </div> <div class="col-sm-6 showroom pasteleria-diseno"> <h2>Pastelería con diseño</h2> <p>Tortas con diseño, popcakes, cupcakes, alfajores y más. Te damos el diseño que necesites.</p> <a href="#" class="btn btn-showroom" role="button">QUIERO TORTAS CON DISEÑO Y MÁS</a> </div> </div> </div> I want that div to be full width. Sorry for the really basic question, but i can't manage to do it, i tried putting all inside a div withe the container-fluid class but it didn't work.

I did this: <script> $(window).scroll(function() { var height = $(window).scrollTop(); if (height > 150) { $(".content-dos").animate({top : "0%"}); } if (height < 90) { $(".content-dos").animate({top : "70%"}); } }); </script> What i'm doing is, based on the window scroll position, i make the second section "go up". It has a position relative with a 70% top intially, so i give it a position top:0 when the scroll is more than 150px down. I'm having a little problem now, and is that whenever i move the scroll up again, it takes some time for the second section to go back to its initial position, like a few seconds. How can i make it go faster? This is where i'm doing it: http://feriapixel.cl/anchour/

Hello I want to do something like this Wordpress theme: http://themenectar.com/demo/salient-frostwave/ In the second section, just after the big header, we have a white background and some blue icons, right? This section has 2 effects in need to learn how to do them: 1- When you scroll-down to the second section with your browser, it looks like the second section "eats" the first. It not only scrolls down, it looks like the second section gets above the first. 2- The first time your browser loads the second section, every icon appear slowly on the screen. How can i do those 2 pretty stuff?

That worked, thanks! problem solved.

I found this collapsible menu: http://codepen.io/joaorafaelm/pen/pbjfi I want to change the color of the 3 icon bars of the button but i'm not able to do it, i just want them white. I tried this and only changed the third bar: label:before{ background:#fff; }

Oh, yeah, opacity, that would do! Look there is text appearing: -In the div with the word "logofolio" written in it you can see the word "design" at the bottom when you hover over it. -When you hover over the "broken egg" one you can see the words "design", "web" and "video" appearing at the bottom-left corner. -The same with Davinci.

Hello I want to learn to do more stuff like in this Wordpress theme: https://www.anchour.com/ After the video and the heading with white background there's a section with pictures, whenever you hover over a picture they get dark and some text appear on them. How can i do this? i know i can do something with the :hover pseudo-class and put some style there to get the picture darker, but... how can i make text that wasn't there in the first place appear?

Reading the bootstrap tutorial on this site, we can have a collapsed navbar when we are watching the site on a small screen: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_collapse&stacked=h How can i have the same collapsed navbar all the time? i mean, i want the same collapsed navbar that appears on mobile to have it on the desktop's wide-screen too.

I followed this tutorial: https://envato.com/blog/video-background-html5-video/ This is the final result: http://feriapixel.cl/anchour/

Hello I want to have a video background on my page, just like this Wordpress theme has: https://www.anchour.com/ I was googleing and i found this, and also deployed it on another website i did some tiem ago: https://codepen.io/dudleystorey/pen/knqyK The problem i have with the example above is that it has to many styles and stuff already created and they destroy the flow of my website. I need to somehow learn to do it from scratch or find another simpler solution so i have a better control of it and also try to make it responsive. So, do you know any tutorial or a jquery plugin or something?

I did it, chum. http://feriapixel.cl/befirm/ This was the function used: $(window).scroll(function() { var height = $(window).scrollTop(); if(height > 400) { $(".navbar-inverse").css("display", "block"); } else { $(".navbar-inverse").css("display", "none"); } });

Ok, you got me there.

Ok, cool, but i don't have the parallax effect anymore. http://feriapixel.cl/befirm/

Hello I want to replicate the background of this Wordpress theme: http://themes.muffingroup.com/be/firm/ It has always the same picture in the same position and it gets behind other divs with transparency, like the yellow div an the others. How can i acomplish that in my page? http://feriapixel.cl/befirm/ I wish my paralax div was on the whole page, just like the picture of that Wordpress theme i showed above. How?

Hello In this Wordpress theme the nav menu changes when you scroll-down the page. At the begining is transparent and big, but then it gets smaller and white. http://feriapixel.cl/wordpress/ How can i do that myself?

Hello, this is my site: http://codelcolab.com/mineralizate2016/ Whenever i click the giant play button for the video, a blue link border is displayed around it and i can't find the css rule to modify that. I'm trying this: a { color: black; } a:focus { color: #fff; } a:active { color: red; } but nope, nothing changes at all. What can i do?

Ok, i found the solution. I just needed to create more carousels and put them side by side, like this: <div class="row carrusel" > <div style="width: 100%; text-align: left;"> <div class="col-xs-4 carousel slide" id="myCarousel"> <div class="carousel-inner" style="text-align: center;"> <div class="item active"> <h4 >Metro<br> Valparaíso</h4> <p>Intervenciones en espacios públicos</p> </div> Then this: <div class="col-xs-4 carousel slide" id="myCarousel2"> <div class="carousel-inner" style="text-align: center;"> <div class="item active"> <h4 >Estación Baquedano Metro de Santiago</h4> <p>Intervenciones en espacios públicos</p> </div> And add 1 script for every single carousel without the clone function like this: <script> $('#myCarousel2').carousel({ interval: 4000 }); var itemCount = 0; var elementlength = $('.carousel .item').length; itemArray = []; //var ItemWidthCalc = 100 / elementlength; //$('.carousel .item > div').each(function() { // $(this).css({'width': ItemWidthCalc + "%"}); //}); $('.carousel .item').each(function() { itemArray.push(); }); $('.carousel .item').each(function() { itemCount = $(this).index(); for (i = 0; i < elementlength - 1; i++) { itemCount++; if (itemCount > elementlength - 1) { itemCount = 0; $(this).append(itemArray[itemCount]); } else { $(this).append(itemArray[itemCount]); } } }); </script>

Ok, that fixes it again: <div class="carousel slide" id="myCarousel"> <div class="row"> <div class="carousel-inner" style="text-align: center;"> <div class="item active"> <div class="col-xs-1 columna-item" ><h4 >Metro<br> Valparaíso</h4> <p>Intervenciones en espacios públicos</p> </div> </div> <div class="item"> <div class="col-xs-1 columna-item"><h4 >Hospital de Urgencia <br>Asistencia Pública</h4> <p>Intervenciones en espacios públicos</p> </div> </div> <div class="item"> <div class="col-xs-1 columna-item"><h4>Qstudio</h4> <p>Diseño en Base a Cobre</p> </div> </div> <div class="item"> <div class="col-xs-1 columna-item"><h4>Kawell</h4> <p>Innovación en el Cuidado Equipo</p> </div> </div> <div class="item"> <div class="col-xs-1 columna-item"><h4>Estación Baquedano Metro de Santiago</h4> <p>Intervenciones en espacios públicos</p> </div> </div> <div class="item"> <div class="col-xs-1 columna-item"><h4>EcoSea Farming</h4> <p>Innovación en acuicultura</p> </div> </div> <div class="item"> <div class="col-xs-1 columna-item"><h4>Centro de Concentración Juan Pinto Durán</h4> <p>Intervenciones en espacios públicos</p> </div> </div> <div class="item"> <div class="col-xs-1 columna-item"><h4>Clinica Mayo</h4> <p>Investigación sobre implantes ortopédicos</p> </div> </div> <div class="item"> <div class="col-xs-1 columna-item"><h4>Hospital del Cobre, Calama</h4> <p>Intervenciones en espacios públicos</p> </div> </div> <div class="item"> <div class="col-xs-1 columna-item"><h4>Hospital FUSAT</h4> <p>Intervenciones en espacios públicos</p> </div> </div> <div class="item"> <div class="col-xs-1 columna-item"><h4>Hospital Roberto del Río, Stgo</h4> <p>Intervenciones en espacios públicos</p> </div> </div> But it still looks terrible. How can i make it to display 3 elements in a row, then other 3 different elements in the same row, then other more and go on like that?

Please, please, please! I need help with this again. I tried to put new elements in the carousel and they appear on a next row instead of appearing in the same one. I tried doint this, but it didn't work as expected and look terrible: <div class="item active"> <div class="col-xs-2 columna-item" ><h4 >Metro<br> Valparaíso</h4> <p>Intervenciones en espacios públicos</p> </div> </div> <div class="item"> <div class="col-xs-2 columna-item"><h4 >Hospital de Urgencia <br>Asistencia Pública</h4> <p>Intervenciones en espacios públicos</p> </div> </div> <div class="item"> <div class="col-xs-2 columna-item"><h4>Qstudio</h4> <p>Diseño en Base a Cobre</p> </div> </div> <div class="item"> <div class="col-xs-2 columna-item"><h4>Kawell</h4> <p>Innovación en el Cuidado Equipo</p> </div> </div> <div class="item"> <div class="col-xs-2 columna-item"><h4>Estación Baquedano Metro de Santiago</h4> <p>Intervenciones en espacios públicos</p> </div> </div> <div class="item"> <div class="col-xs-2 columna-item"><h4>EcoSea Farming</h4> <p>Innovación en acuicultura</p> </div> </div> <div class="item"> <div class="col-xs-2 columna-item"><h4>Centro de Concentración Juan Pinto Durán</h4> <p>Intervenciones en espacios públicos</p> </div> </div> <div class="item"> <div class="col-xs-2 columna-item"><h4>Clinica Mayo</h4> <p>Investigación sobre implantes ortopédicos</p> </div> </div> <div class="item"> <div class="col-xs-2 columna-item"><h4>Hospital del Cobre, Calama</h4> <p>Intervenciones en espacios públicos</p> </div> </div> <div class="item"> <div class="col-xs-2 columna-item"><h4>Hospital FUSAT</h4> <p>Intervenciones en espacios públicos</p> </div> </div> <div class="item"> <div class="col-xs-2 columna-item"><h4>Hospital Roberto del Río, Stgo</h4> <p>Intervenciones en espacios públicos</p> </div> </div>

I fixed it! One of the problems was that Bootstrap created an extra space to the side everytime i put a row inside another row, i don't know why. The other was just untidy code.

But i'm using "display:none" for the video container, for screens with max 600px i'm displaying another div called "oculto" (hidden in spanish).

Ok, the problem is not totally solved, now everything has the same width and when i shrink the screen everything looks ok, but when i watch the page in my phone, the browser displays a big white space to the right of the document, i don't know why.

Problem fixed, thanks a lot. That was exactly the problem, the closing div missing.