Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Why clear: both isn't working in my media queries

The image in my article is floated to the left, but when I want to change this in my media queries in order to not float at all, it doesn't work...but if I change the value to float it right, that's exactly what happens, so I guess is not a reference problem...What I'm doing wrong?

code:

'''html <!DOCTYPE html> <html> <head> <title>Header Responsive</title> <link rel="stylesheet" type="text/css" href="estilos.css"> <link href="https://fonts.googleapis.com/css?family=Fascinate+Inline" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div id="contenedor"> <header class="header"> <div class="logo"> <img src="https://pbs.twimg.com/profile_images/748043752703406080/VSejBGEs.jpg"> </div> <div class="textlogo"> <h1>Michel Focault</h1> <h2>Página Oficial</h2> </div> <div class="nav"> <nav> <ul> <li><a href="#" class="active">Inicio</a></li> <li><a href="#">Biografía</a></li> <li><a href="#">Ideas</a></li> <li><a href="#">Obras</a></li> <li><a href="#">Críticas</a></li> <li><a href="#">Libros</a></li> </ul> </nav> </div> </header>

  <section id="main">
    <header class="mainheader">
      <h3>Inicio</h3>
    </header>

    <article class="mainarticle">
      <img src="http://antroposmoderno.com/Pix/img-foucault.jpg">

      <div class="firstp">
        <p>Michel Foucault (pronunciación francesa: [miˈʃɛl fuˡko]), nacido como Paul-Michel Foucault (Poitiers, Francia, 15 de octubre de 1926-París, 25 de junio de 1984) fue un historiador de las ideas, psicólogo, teórico social y filósofo francés. Fue profesor en varias universidades francesas y estadounidenses y catedrático de Historia de los sistemas de pensamiento en el Collège de France (1970-1984), en reemplazo de la cátedra de Historia del pensamiento filosófico, que ocupó hasta su muerte Jean Hyppolite. El 12 de abril de 1970, la asamblea general de profesores del College de France eligió a Michel Foucault, que por entonces tenía 43 años, como titular de la nueva cátedra. Su trabajo ha influido en importantes personalidades de las ciencias sociales y las humanidades.</p>
      </div>

      <p>Foucault es conocido principalmente por sus estudios críticos de las instituciones sociales, en especial la psiquiatría, la medicina, las ciencias humanas, el sistema de prisiones, así como por su trabajo sobre la historia de la sexualidad humana. Sus análisis sobre el poder y las relaciones entre poder, conocimiento y discurso han sido ampliamente debatidos. En los años sesenta, Foucault estuvo asociado al estructuralismo, un movimiento del que se distanció más adelante, aunque haya usado de un modo personal los métodos de dicho enfoque: Las palabras y las cosas puede entenderse como una crítica a la pretensión sígnica, dejando de lado su interés por las condiciones de modificación histórica del sentido. En ulteriores trabajos y cursos desarrolló conceptos como biopoder y biopolítica, de especial relevancia en la obra de pensadores políticos contemporáneos como Antonio Negri, Michael Hardt, Giorgio Agamben y Roberto Esposito.</p>

      <p>Foucault rechazó las etiquetas de postestructuralista y postmoderno, que le eran aplicadas habitualmente, prefiriendo clasificar su propio pensamiento como una crítica histórica de la modernidad con raíces en Immanuel Kant. En el texto «¿Qué es la ilustración?» definió mejor su proyecto teórico como una ontología crítica de la actualidad siguiendo la impronta kantiana.</p>

      <p>Fue influido profundamente por la filosofía alemana, en especial por la obra de Friedrich Nietzsche. Precisamente, su «genealogía del conocimiento» es una alusión directa a la idea nietzscheana de «la genealogía de la moral». En una de sus últimas entrevistas afirmaría: «Soy un nietzscheano». Reconocería también una deuda con el pensamiento de Martin Heidegger y sus críticas al sujeto cartesiano y la techné occidental: «Heidegger ha sido un filósofo esencial para mi», declararía en junio de 1984, aunque criticaría varias veces posiciones esenciales de Heidegger tales como su interpretación de la historia de la verdad en occidente como un olvido del ser.</p>

      <p>En el año 2007 Foucault fue considerado por el The Times Higher Education Guide como el autor más citado del mundo en el ámbito de humanidades en dicho año.</p>
    </article>
  </section>

  <footer>
    <p>&copy; 2017 Gabriel Rojas Diseño Web</p>
    <a href="#" class="fa fa-facebook"></a>
  </footer>
</div>

</body>

</html> ''' '''css /* Global */

contenedor {

width: 80%; margin: 0 auto; }

a { text-decoration: none; font-family: 'Fascinate Inline', cursive; }

a.active, a:hover { color: red; }

/* Header */

.header { border: 3px solid black; overflow: hidden; height: 235px; }

.logo { float: left; width: 24.8%; height: 100%; border-right: 2px solid black; }

.logo img { width: 100%; }

.textlogo { float: left; width: 75%; text-align: right; background: lightgrey; font-size: 205%; border-bottom: 2px solid black; }

.textlogo h1, h2 { margin: 0; }

.nav { float: left; width: 75%; margin-top: 6%; }

.nav ul { list-style: none; margin: 0; padding: 0; text-align: right }

.nav ul li { display: inline; font-size: 140%; padding-left: 3%; margin-right: 0.5%; }

/* Main Header */

.mainheader { background: lightblue; }

.mainarticle img { float: left; margin-right: 4px; border: 2px solid black; }

.firstp p::first-letter { font-size: 200%; color: red; }

/* Footer */

footer { background: lightgrey; height: 90px; font-family: 'Roboto', sans-serif; text-align: center; }

.fa { padding: 10px; font-size: 20px; width: 100px; text-align: center; text-decoration: none; margin: 5px 2px; }

.fa:hover { opacity: 0.7; }

.fa-facebook { background: #3B5998; color: white; }

/* Media Queries */

@media screen and (max-width: 1279px) {

.header { width: 100%; height: auto; }

.logo { clear: both; width: 50%; margin: auto; }

.logo img { width: 100%; display: block; }

.textlogo { clear: both; width: 100%; }

.nav { clear: both; width: 100%; }

.nav ul li { display: block; text-align: center; }

.nav ul li a { display: block; width: 100%; }

.mainarticle img { clear: both; }

.mainarticle p { text-align: center; }

}

'''

Steven Parker
Steven Parker
229,744 Points

It looks like you tried to format your code but you used apostrophes (') instead of accents ("back-ticks") (`).

2 Answers

Steven Parker
Steven Parker
229,744 Points

I use an override to turn off the float property, and for fun I also centered the image:

/* within the media query */
  .mainarticle img {
    float: none;
    margin-left: calc(50% - 101px);
  }

Excellent!!!!!!! Thanks... I don't know why, but float: none is working. Maybe Bracket's dynamic view has to be reseted from time to time

Salvador Cervantes
Salvador Cervantes
10,898 Points

Have you tried adding float:none; ?

Yes!