width in responsive slide show

Asked

Viewed 74 times

4

I’m building the responsive of a study project, Codes below:

var slideItem=0;
window.onload =function() {
     setInterval(passarSlide, 2000);
	var slidewidth =document.getElementById("slideshow").offsetWidth;
	var objs =document.getElementsByClassName("slide");
	for(var i in objs) {
		objs[i].style.width=slidewidth+'px';
    }  
}
function passarSlide() {
var slidewidth =document.getElementById("slideshow").offsetWidth;

if(slideItem>= 3) {
  slideItem=0
    } else {
    	slideItem++;
    }

    document.getElementsByClassName("slideshow_area")[0].style.marginLeft= "-"+(slidewidth * slideItem)+"px";
}
function mudarSlide(pos) {
	slideItem = pos;
	var slidewidth =document.getElementById("slideshow").offsetWidth;	
    document.getElementsByClassName("slideshow_area")[0].style.marginLeft= "-"+(slidewidth * slideItem)+"px";
            body {
                margin: 0;
                padding: 0;
                font-family: helvetica;
                font-size: 12px;
            }
            
            .topo {
                height: 30px;
                background-color: #303030;
            }
            
            .topoint {
                width: 100%;
                max-width: 1040px;
                height: 30px;
                margin: auto;
            }
            
            .topoleft {
                width: 50%;
                height: 30px;
                float: left;
            }
            
            .toporight {
                width: 50%;
                height: 28px;
                float: right;
                text-align: right;
                margin-top: 2px;
            }
            
            .topoleft ul {
                margin: 0;
                padding: 0;
                list-style: none;
            }
            
            .topoleft li {
                float: left;
                height: 30px;
                line-height: 30px;
                margin-left: 8px;
                margin-right: 8px;
            }
            
            .topoleft li a {
                text-decoration: none;
                color: #FFF;
            }
            
            .topoleft li .ativo {
                color: blue;
            }
            
            .topobusca {
                width: 110px;
                height: 26px;
                outline: 0;
            }
            
            .toporight a {
                float: right;
            }
            
            .toporight input {
                float: right;
            }
            
            .toporight img {
                margin-right: 4px;
            }
            
            .topo2 {
                height: 95px;
            }
            
            .topo2int {
                width: 100%;
                max-width: 1040px;
                height: 95px;
                margin: auto;
            }
            
            .logo {
                width: 230px;
                height: 65px;
                float: left;
                margin-top: 30px;
            }
            
            .topo2 .banner {
                width: 650px;
                height: 80px;
                float: right;
                margin-top: 7px;
                background-color: #ff0000;
                font-size: 40px;
                color: #fff;
                line-height: 80px;
                text-align: center;
                font-family: roboto;
            }
            
            .menu {
                height: 40px;
                background-color: #ff0000;
            }
            
            .menuint {
                width: 100%;
                max-width: 1040px;
                height: 40px;
                margin: auto;
            }
            
            .menu ul {
                margin: 0;
                padding: 0;
                list-style: none;
                position: absolute;
            }
            
            .menu li {
                float: left;
                height: 40px;
                line-height: 40px;
                padding-left: 8px;
                padding-right: 8px;
            }
            
            .menu li:hover .submenu {
                display: block;
            }
            
            .menu a {
                color: #fff;
                text-decoration: none;
            }
            
            .submenu {
                width: 140px;
                position: absolute;
                background-color: #ff0000;
                display: none;
            }
            
            .submenuitem {
                width: 140px;
                height: 30px;
                line-height: 30px;
                padding-left: 10px;
            }
            
            .submenuitem:hover {
                background-color: #ff5555;
                width: 130px;
            }
            
            .ultimasnoticias {
                height: 40px;
            }
            
            .ultimasnoticiasint {
                width: 100%;
                max-width: 1040px;
                height: 40px;
                margin: auto;
            }
            
            .ultnoticiasarea {
                height: 28px;
                background-color: #fff;
                border: 1px solid #ccc;
                margin-top: 10px;
                border-radius: 2px;
            }
            
            .ultnoticiastitulo {
                background-color: #ff0000;
                color: #fff;
                height: 28px;
                line-height: 28px;
                display: inline-block;
                padding-left: 10px;
                padding-right: 10px;
                border-top-left-radius: 2px;
                border-bottom-left-radius: 2px;
                font-size: 16px;
            }
            
            .ultnoticiasnoticia {
                color: #000;
                height: 28px;
                line-height: 28px;
                display: inline-block;
                padding-left: 10px;
                border-top-right-radius: 2px;
                border-bottom-right-radius: 2px;
            }
            
            .containerint {
                width: 100%;
                max-width: 1040px;
                margin: auto;
            }
            
            .leftside {
                width: 750px;
                float: left;
            }
            
            .rightside {
                width: 278px;
                min-height: 300px;
                float: right;
                margin-left: 12px;
            }
            
            .widget {
                border: 1px solid #ccc;
                background-color: #fff;
                margin-bottom: 10px;
                border-radius: 2px;
            }
            
            .widget_titulo {
                height: 30px;
                line-height: 30px;
                background-color: #ddd;
                border-bottom: 1px solid #ccc;
                padding-left: 5px;
                font-size: 14px;
            }
            
            .widget_conteudo {
                text-align: center;
                padding-top: 5px;
                padding-bottom: 5px;
            }
            
            .noticia_item {
                font-size: 14px;
                margin: 0px 10px;
                padding: 10px 0px;
                text-align: left;
                border-bottom: 1px solid #ccc;
            }
            
            .noticia_item a {
                text-decoration: none;
                color: #000;
            }
            
            .slideshow {
                height: 335px;
                overflow: hidden;
                margin-bottom: 20px;
            }
            
            .slideshow_area {
                width: 10000px;
                height: 335px;
                transition: all 1s;
            }
            
            .slide {
                height: 335px;
                float: left;
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
            }
            
            .slide img {
                height: 335px;
                width: 750px;
            }
            
            .slideinfo {
                position: relative;
                top: -70px;
                height: 70px;
                background-image: url('../images/slideshow_bg.png');
                background-size: auto 70px;
                z-index: 10000;
            }
            
            .slideinfo_titulo {
                font-size: 20px;
                color: #fff;
                padding-top: 20px;
                margin-left: 20px;
            }
            
            .slideinfo_subtitulo {
                font-size: 13px;
                margin-left: 20px;
                color: #fff;
            }
            
            .bolls {
                position: absolute;
                width: 200px;
                height: 15px;
                margin-left: 10px;
                padding-top: 10px;
            }
            
            .boll {
                width: 15px;
                height: 15px;
                float: left;
                margin-right: 5px;
                cursor: pointer;
                background-color: #d0d1cc;
                border-radius: 10px;
            }
            
            .noticiaarea1 {
                width: 420px;
                height: 420px;
                float: left;
            }
            
            .noticiaitem1 {
                height: 220px;
            }
            
            .noticia_image {
                width: 390px;
                height: 220px;
                float: left;
                padding: 3px;
                border: 1px solid #ccc;
                margin-top: 4px;
                margin-left: 15px;
            }
            
            .texto_descritivo {
                font-size: 30px;
                width: 390px;
                text-align: left;
                margin-left: 15px;
            }
            
            .texto_subdescritivo {
                color: #ccc;
                font-size: 12px;
                text-align: left;
                margin-left: 15px;
            }
            
            .noticiaarea2 {
                width: 310px;
                height: 420px;
                float: right;
            }
            
            .clear {
                clear: both;
            }
            
            .noticiaitem {
                text-align: left;
                height: 88px;
                margin-bottom: 14px;
            }
            
            .noticia_img {
                width: 80px;
                height: 80px;
                border: 1px solid #ccc;
                padding: 3px;
                margin-top: 4px;
                float: left;
            }
            
            .noticiatitulo {
                float: left;
                margin-left: 5px;
                margin-top: 4px;
                font-size: 16px;
                width: 216px;
            }
            
            .noticiainfo {
                float: left;
                margin-left: 5px;
                margin-top: 4px;
                color: #999;
                width: 216px;
            }
            
            .footer {
                position: absolute;
                height: 35px;
                width: 100%;
                left: 0;
                background-color: #ff0000;
            }
            
            .footerint {
                width: 100%;
                max-width: 1040px;
                height: 35px;
                margin: auto;
                background-color: #ff0000;
                font-size: 20px;
                color: #fff;
                text-align: center;
                line-height: 35px;
                font-family: roboto;
            }
            
            @media only screen and (max-width:1057px) {
                .topoint,
                .topo2int,
                .menuint,
                .ultimasnoticiasint,
                .containerint,
                .footerint {
                    max-width: 890px;
                }
                .leftside {
                    width: 600px;
                }
                .slide img {
                    width: ;
                }
                .noticiaarea1 {
                    width: 280px;
                }
                .noticia_image {
                    width: 250px;
                }
                .noticia_image img {
                    width: 250px;
                }
                .texto_descritivo {
                    width: 250px;
                    font-size: 25px;
                }
            }

A test tile for this slide Test subtitle for this slide A test tile for this slide Test subtitle for this slide A test tile for this slide Test subtitle for this slide A test tile for this slide Test subtitle for this slide NEWS Some descriptive text that will appear here below this image 1250 Likes 500 comments Some kind of title 500 comments Some kind of title 500 comments Some kind of title 500 comments RECENT NEWS Some descriptive text that will appear here below this image 1250 Likes 500 comments Some kind of title 500 comments Some kind of title 500 comments Some kind of title 500 comments 2018. All rights reserved SOCIAL LATEST NEWS Any news from any site that will appear in this part of the portal to exemplify. Any news from any site that will appear in this part of the portal to exemplify. Any news from any site that will appear in this part of the portal to exemplify. Any news from any site that will appear in this part of the portal to exemplify. Any news from any site that will appear in this part of the portal to exemplify. PUBLICIDADADE FIND US ON FACEBOOK

javascript html5 css3

1 answer

0


To create responsiveness one should not use fixed dimensions on elements that should self-adjusting. Percentages are usually used, such as: width: 100%, max-width: LARGURA MÁX[px|%] or vw (width of the viewport).

For example, here you are using a fixed width for the images:

.slide img {
    height: 335px;
    width: 750px;
}

And here also a fixed width on a div:

.leftside {
    width: 600px;
}

I made some changes to the CSS (see comments on it) to make the slide part responsive, but you still need some adjustment as needed:

body {
    margin: 0;
    padding: 0;
    font-family: helvetica;
    font-size: 12px;
}

.topo {
    height: 30px;
    background-color: #303030;
}

.topoint {
    width: 100%;
    max-width: 1040px;
    height: 30px;
    margin: auto;
}

.topoleft {
    width: 50%;
    height: 30px;
    float: left;
}

.toporight {
    width: 50%;
    height: 28px;
    float: right;
    text-align: right;
    margin-top: 2px;
}

.topoleft ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.topoleft li {
    float: left;
    height: 30px;
    line-height: 30px;
    margin-left: 8px;
    margin-right: 8px;
}

.topoleft li a {
    text-decoration: none;
    color: #FFF;
}

.topoleft li .ativo {
    color: blue;
}

.topobusca {
    width: 110px;
    height: 26px;
    outline: 0;
}

.toporight a {
    float: right;
}

.toporight input {
    float: right;
}

.toporight img {
    margin-right: 4px;
}

.topo2 {
    height: 95px;
}

.topo2int {
    width: 100%;
    max-width: 1040px;
    height: 95px;
    margin: auto;
}

.logo {
    width: 230px;
    height: 65px;
    float: left;
    margin-top: 30px;
}

.topo2 .banner {
    width: 650px;
    height: 80px;
    float: right;
    margin-top: 7px;
    background-color: #ff0000;
    font-size: 40px;
    color: #fff;
    line-height: 80px;
    text-align: center;
    font-family: roboto;
}

.menu {
    height: 40px;
    background-color: #ff0000;
}

.menuint {
    width: 100%;
    max-width: 1040px;
    height: 40px;
    margin: auto;
}

.menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
}

.menu li {
    float: left;
    height: 40px;
    line-height: 40px;
    padding-left: 8px;
    padding-right: 8px;
}

.menu li:hover .submenu {
    display: block;
}

.menu a {
    color: #fff;
    text-decoration: none;
}

.submenu {
    width: 140px;
    position: absolute;
    background-color: #ff0000;
    display: none;
}

.submenuitem {
    width: 140px;
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
}

.submenuitem:hover {
    background-color: #ff5555;
    width: 130px;
}

.ultimasnoticias {
    height: 40px;
}

.ultimasnoticiasint {
    width: 100%;
    max-width: 1040px;
    height: 40px;
    margin: auto;
}

.ultnoticiasarea {
    height: 28px;
    background-color: #fff;
    border: 1px solid #ccc;
    margin-top: 10px;
    border-radius: 2px;
}

.ultnoticiastitulo {
    background-color: #ff0000;
    color: #fff;
    height: 28px;
    line-height: 28px;
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    font-size: 16px;
}

.ultnoticiasnoticia {
    color: #000;
    height: 28px;
    line-height: 28px;
    display: inline-block;
    padding-left: 10px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}

.containerint {
    width: 100%;
    max-width: 1040px;
    margin: auto;
}

.leftside {
    width: 750px;
    float: left;
}

.rightside {
    width: 278px;
    min-height: 300px;
    float: right;
    margin-left: 12px;
}

.widget {
    border: 1px solid #ccc;
    background-color: #fff;
    margin-bottom: 10px;
    border-radius: 2px;
}

.widget_titulo {
    height: 30px;
    line-height: 30px;
    background-color: #ddd;
    border-bottom: 1px solid #ccc;
    padding-left: 5px;
    font-size: 14px;
}

.widget_conteudo {
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
}

.noticia_item {
    font-size: 14px;
    margin: 0px 10px;
    padding: 10px 0px;
    text-align: left;
    border-bottom: 1px solid #ccc;
}

.noticia_item a {
    text-decoration: none;
    color: #000;
}

.slideshow {
    height: 335px;
    overflow: hidden;
    margin-bottom: 20px;
}

.slideshow_area {
    width: 10000px;
    height: 335px;
    transition: all 1s;
}

.slide {
    height: 335px;
    float: left;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%; /* adicionado */
    max-width: 750px; /* adicionado */
}

.slide img {
    height: 335px;
    /* width: 750px; removido */
    width: 100%;/* adicionado */
}

.slideinfo {
    position: relative;
    top: -70px;
    height: 70px;
    background-image: url('../images/slideshow_bg.png');
    background-size: auto 70px;
    z-index: 10000;
}

.slideinfo_titulo {
    font-size: 20px;
    color: #fff;
    padding-top: 20px;
    margin-left: 20px;
}

.slideinfo_subtitulo {
    font-size: 13px;
    margin-left: 20px;
    color: #fff;
}

.bolls {
    position: absolute;
    width: 200px;
    height: 15px;
    margin-left: 10px;
    padding-top: 10px;
}

.boll {
    width: 15px;
    height: 15px;
    float: left;
    margin-right: 5px;
    cursor: pointer;
    background-color: #d0d1cc;
    border-radius: 10px;
}

.noticiaarea1 {
    width: 420px;
    height: 420px;
    float: left;
}

.noticiaitem1 {
    height: 220px;
}

.noticia_image {
    width: 390px;
    height: 220px;
    float: left;
    padding: 3px;
    border: 1px solid #ccc;
    margin-top: 4px;
    margin-left: 15px;
}

.texto_descritivo {
    font-size: 30px;
    width: 390px;
    text-align: left;
    margin-left: 15px;
}

.texto_subdescritivo {
    color: #ccc;
    font-size: 12px;
    text-align: left;
    margin-left: 15px;
}

.noticiaarea2 {
    width: 310px;
    height: 420px;
    float: right;
}

.clear {
    clear: both;
}

.noticiaitem {
    text-align: left;
    height: 88px;
    margin-bottom: 14px;
}

.noticia_img {
    width: 80px;
    height: 80px;
    border: 1px solid #ccc;
    padding: 3px;
    margin-top: 4px;
    float: left;
}

.noticiatitulo {
    float: left;
    margin-left: 5px;
    margin-top: 4px;
    font-size: 16px;
    width: 216px;
}

.noticiainfo {
    float: left;
    margin-left: 5px;
    margin-top: 4px;
    color: #999;
    width: 216px;
}

.footer {
    position: absolute;
    height: 35px;
    width: 100%;
    left: 0;
    background-color: #ff0000;
}

.footerint {
    width: 100%;
    max-width: 1040px;
    height: 35px;
    margin: auto;
    background-color: #ff0000;
    font-size: 20px;
    color: #fff;
    text-align: center;
    line-height: 35px;
    font-family: roboto;
}

@media only screen and (max-width:1057px) {
    .topoint,
    .topo2int,
    .menuint,
    .ultimasnoticiasint,
    .containerint,
    .footerint {
        max-width: 890px;
    }
    .leftside {
        width: 600px;
    }
    .slide, .slideshow { /* alterado */
        max-width: 600px; /* adicionado */
    }
    .noticiaarea1 {
        width: 280px;
    }
    .noticia_image {
        width: 250px;
    }
    .noticia_image img {
        width: 250px;
    }
    .texto_descritivo {
        width: 250px;
        font-size: 25px;
    }
}
<div class="topo">
  <div class="topoint">
      <div class="topoleft">
          <ul>
              <li><a href="./" class="ativo"> Home<a/></li>
        <li><a href="Quem somos">Quem Somos<a/></li>
        <li><a href="Anuncie aqui">Anuncie Aqui<a/></li>
        <li><a href="Contato">Contato<a/></li>
    </ul>
 </div>
    <div class="toporight">
      <input type="image" border="0" src="assets/images/lupabranca.png" width="26" height="26" >
      <input type="text" name="busca" class="topobusca" placeholder="Busca..." >
      <a href=""><img src="assets/images/youtube.png" border="0" width="26" height="26" /></a>
                  <a href=""><img src="assets/images/twitter.png" border="0" width="26" height="26" /></a>
                  <a href=""><img src="assets/images/facebook.png" border="0" width="26" height="26" /></a>
                  <a href=""><img src="assets/images/googleplus.png" border="0" width="26" height="26" /></a>
                  <a href=""><img src="assets/images/rss.png" border="0" width="26" height="26" /></a>
      </div>
  </div>
</div>
<div class="topo2">
  <div class="topo2int">
      <div class="logo">
          <img src="assets/images/logo.jpg" border="0" width="230" />
      </div>
      <div class="banner">
          PUBLICIDADE 80 X 650
      </div>
  </div>
</div>
<div class="menu">
  <div class="menuint">
      <ul>
          <li><a href="./" class="ativo">Home<a/></li>
    <li><a href="./" >Economia<a/></li>
    <li>
      <a href="./" >Entretenimento<a/>
      <img src="assets/images/arrowdown.png" border="0" width="10"/>
        <div class="submenu">
            <a href="./"><div class="submenuitem">submenu1</div></a>
              <a href="./">
                  <div class="submenuitem">submenu2</div>
              </a>
              <a href="./">
                  <div class="submenuitem">submenu3</div>
              </a>
              <a href="./">
                  <div class="submenuitem">submenu4</div>
              </a>
              <a href="./">
                  <div class="submenuitem">submenu5</div>
              </a>
  </div>
  </li>
  <li>
      <a href="./">Esportes<a/>
      <img src="assets/images/arrowdown.png" border="0" width="10">
        <div class="submenu">
            <a href="./"><div class="submenuitem">submenu1</div></a>
      <a href="./">
          <div class="submenuitem">submenu2</div>
      </a>
      <a href="./">
          <div class="submenuitem">submenu3</div>
      </a>
</div>
</li>
<li><a href="./">Geral<a/></li>
    <li>
      <a href="./" >Notícias<a/>
      <img src="assets/images/arrowdown.png" border="0" width="10">
        <div class="submenu">
            <a href="./"><div class="submenuitem">submenu1</div></a>
  <a href="./">
      <div class="submenuitem">submenu2</div>
  </a>
  <a href="./">
      <div class="submenuitem">submenu3</div>
  </a>
  <a href="./">
      <div class="submenuitem">submenu4</div>
  </a>
  </div>
</li>
<li><a href="./">policia<a/></li>
    <li><a href="./" >Videos<a/></li>
 </ul>
</div>
</div>
 <div class="ultimasnoticias">
  <div class="ultimasnoticiasint">
    <div class="ultnoticiasarea">
       <div class="ultnoticiastitulo">ÚLTIMAS NOTÍCIAS</div>
       <div class="ultnoticiasnoticia">Alguma nótícia de algum texto que vai aparecer aqui...</div>
    </div>
</div>
</div>
<div class="container">
  <div class="containerint">
      <div class="leftside">
          <div class="slideshow" id="slideshow">
                <div class="bolls">
                    <div class="boll" onclick="mudarSlide(0)"></div>
                    <div class="boll" onclick="mudarSlide(1)"></div>
                    <div class="boll" onclick="mudarSlide(2)"></div>
                    <div class="boll" onclick="mudarSlide(3)"></div>
                </div>
               <div class="slideshow_area">
                  <a href="http://br.ufc.com/">
                  <div class="slide">
                       <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
                      <div class="slideinfo">
                   <div class="slideinfo_titulo">Um tiulo de teste para esse slide</div>
                 <div class="slideinfo_subtitulo">Subtitulo de teste para esse slide</div>
              </div>
           </div>
           </a>
  <a href="http://sicnoticias.sapo.pt/">
      <div class="slide">
          <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
          <div class="slideinfo">
              <div class="slideinfo_titulo">Um tiulo de teste para esse slide</div>
              <div class="slideinfo_subtitulo">Subtitulo de teste para esse slide</div>
          </div>
      </div>
  </a>
  <a href="https://www.nfl.com/">
      <div class="slide">
          <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
          <div class="slideinfo">
              <div class="slideinfo_titulo">Um tiulo de teste para esse slide</div>
              <div class="slideinfo_subtitulo">Subtitulo de teste para esse slide</div>
          </div>
      </div>
  </a>
  <a href="http://www.uefa.com/uefachampionsleague/index.html">
      <div class="slide">
          <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
          <div class="slideinfo">
              <div class="slideinfo_titulo">Um tiulo de teste para esse slide</div>
              <div class="slideinfo_subtitulo">Subtitulo de teste para esse slide</div>
          </div>
      </div>
  </a>
  </div>
  </div>
  <div class="widget">
      <div class="widget_titulo">NOTÍCIAS</div>
      <div class="widget_conteudo">
          <div class="noticiaarea1">
              <div class="noticiaitem1">
                  <div class="noticia_image">
                      <img src="assets/images/quadrilha.jpg" border="0" width="390" height="220">
                  </div>
                  <div class="texto_descritivo">Algum texto descritivo que vai aparecer por aqui abaixo dessa imagem</div>
                  <div class="texto_subdescritivo"> 1250 likes 500 comentários</div>
              </div>
          </div>
          <div class="noticiaarea2">
              <div class="noticiaitem">
                  <div class="noticia_img">
                      <img src="assets/images/jogo.jpg" border="0" width="80" height="80">
                  </div>
                  <div class="noticiatitulo">Algum titulo qualquer</div>
                  <div class="noticiainfo">500 comentários</div>
              </div>
              <div class="noticiaitem">
                  <div class="noticia_img">
                      <img src="assets/images/rihanna.jpg" border="0" width="80" height="80">
                  </div>
                  <div class="noticiatitulo">Algum titulo qualquer</div>
                  <div class="noticiainfo">500 comentários</div>
              </div>
              <div class="noticiaitem">
                  <div class="noticia_img">
                      <img src="assets/images/vint Cerf.jpg" border="0" width="80" height="80">
                  </div>
                  <div class="noticiatitulo">Algum titulo qualquer</div>
                  <div class="noticiainfo">500 comentários</div>
              </div>
          </div>
          <div style="clear: both;"></div>
      </div>
  </div>
  <div class="widget">
      <div class="widget_titulo">NOTÍCIAS RECENTES</div>
      <div class="widget_conteudo">
          <div class="noticiaarea1">
              <div class="noticiaitem1">
                  <div class="noticia_image">
                      <img src="assets/images/empresa.jpg" border="0" width="390" height="220">
                  </div>
                  <div class="texto_descritivo">Algum texto descritivo que vai aparecer por aqui abaixo dessa imagem</div>
                  <div class="texto_subdescritivo"> 1250 likes 500 comentários</div>
              </div>
          </div>
          <div class="noticiaarea2">
              <div class="noticiaitem">
                  <div class="noticia_img">
                      <img src="assets/images/escritorio.jpg" border="0" width="80" height="80">
                  </div>
                  <div class="noticiatitulo">Algum titulo qualquer</div>
                  <div class="noticiainfo">500 comentários</div>
              </div>
              <div class="noticiaitem">
                  <div class="noticia_img">
                      <img src="assets/images/paisagem.jpg" border="0" width="80" height="80">
                  </div>
                  <div class="noticiatitulo">Algum titulo qualquer</div>
                  <div class="noticiainfo">500 comentários</div>
              </div>
              <div class="noticiaitem">
                  <div class="noticia_img">
                      <img src="assets/images/carro.jpg" border="0" width="80" height="80">
                  </div>
                  <div class="noticiatitulo">Algum titulo qualquer</div>
                  <div class="noticiainfo">500 comentários</div>
              </div>
          </div>
          <div style="clear: both;"></div>
      </div>
  </div>
  <footer>
      <div class="footer">
          <div class="footerint">© 2018. Todos os direitos reservados</div>
      </div>
  </footer>
  </div>
  <div class="rightside">
      <div class="widget">
          <div class="widget_titulo">SOCIAL</div>
          <div class="widget_conteudo">
              <a href=""><img src="assets/images/rss.png" border="0" width="26" height="26" /></a>
              <a href=""><img src="assets/images/googleplus.png" border="0" width="26" height="26" /></a>
              <a href=""><img src="assets/images/facebook.png" border="0" width="26" height="26" /></a>
              <a href=""><img src="assets/images/twitter.png" border="0" width="26" height="26" /></a>
              <a href=""><img src="assets/images/youtube.png" border="0" width="26" height="26" /></a>
          </div>
      </div>
      <div class="widget">
          <div class="widget_titulo">ULTIMAS NOTÍCIAS</div>
          <div class="widget_conteudo">
              <div class="noticia_item">
                  <a href="./">Alguma notícia de algum site que vai
                   aparecer nesta parte do portal para exemplificar.<a/>
                </div>
                   <div class="noticia_item">
                   <a href="./">Alguma notícia de algum site que vai
                   aparecer nesta parte do portal para exemplificar.<a/>
                </div>
                 <div class="noticia_item">
                   <a href="./">Alguma notícia de algum site que vai
                   aparecer nesta parte do portal para exemplificar.<a/>
                </div>
                 <div class="noticia_item">
                   <a href="./">Alguma notícia de algum site que vai
                   aparecer nesta parte do portal para exemplificar.<a/>
                </div>
                 <div class="noticia_item">
                   <a href="./">Alguma notícia de algum site que vai
                   aparecer nesta parte do portal para exemplificar.<a/>
                </div>
            </div>
       </div>
          <div class="widget">
             <div class="widget_titulo">PUBLICIDADADE</div>
            <div class="widget_conteudo">
                <img src="assets/images/girl.jpg" border="0" width="275" >
            </div>
       </div>
       <div class="widget">
             <div class="widget_titulo">ENCONTRE-NOS NO FACEBOOK</div>
            <div class="widget_conteudo">
            <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fnike&tabs=timeline&width=272&height=465&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=false&appId" width="272" height="465" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
          </div>
       </div>
    </div>
  </div>
</div>

  • I did as you said, more when I lower the page to the 1057 px established the site breaks, how to solve this?

  • Stephan, try leaving the class .leftside { with the same 600px to make a test.

  • It worked, but when I go back to the original screen the images inside slide do not follow and are appearing half of each one and breaks the slide so I need to give an F5 to go back to normal, what? there’s a way to fix it?

  • I updated the part about @media only screen and (max-width:1057px) {... it seems to me that the minimum resolution is 600px, so I left some classes with 600px fixed.

  • Now it worked just fine, thanks for the help!

  • Hello, I am continuing with the responsiveness of the project, and now I have a problem in my logo and in the navigation div latest news. The logo is getting stuck at the top of the portal, while the navigation menu last news is not adapting the width of the rest of the content, can give me a help?

  • Where can I post the codes so you can take a look?

  • Oops! I’ll talk to you soon, blz?

  • All right, buddy, no problem!

  • Let’s go continue this discussion in chat.

  • I’m in the chat room.....

  • Hey buddy, come on chat I had some more problems.

Show 7 more comments

Browser other questions tagged javascript html5 css3

You are not signed in. Login or sign up in order to post.