Why DIVs and Images are not resizing, but being cutted? - html

Question

Ok, so here we go:
http://judao.com.br/direto-do-epicentro-de-terremoto-a-falha-de-san-andreas/
The content images are huge, 100% width, with a caption. BUT on a 1080p resolution. Anything below that cuts the images, the caption AND the video.
The divs are inside another one, that says max-width: 960px. Here's what I did to make it huge.
#tamanhao {
display: inline-block;
left: -50%;
outline: 0;
overflow: hidden;
position: relative;
text-align: center;
height: auto !important;
width: 200%;
}
#tamanhao img {
max-width: 100% !important;
padding-top: 32px !important;
height: auto !important;
}
.caption {
float: left;
display: inline;
margin-top: -16px;
font-size: 14px;
color: #888;
padding-left: 32px !important;
max-width: 470px;
font-style: italic;
font-family: exo;
text-align: left !important;
line-height: 14px !important;
}
#videozao {
display: block;
left: -50%;
outline: 0;
overflow: hidden;
position: relative;
text-align: center;
width: 200%;
max-height: 744px !important;
}
#videozao iframe {
margin: 0 auto;
display: block;
width: 1280px !important;
height: 720px !important;
position: relative;
}
What am I doing wrong? How can I make it right?

Answer 1

This is because you are using static widths for your content, meaning you're using px instead of percentage. Percentage will make your content to be responsive in smaller screens fiting the screen while resizing the window, while for example 500px will always maintain that same value, unless you use media queries. Here's a example, Resize the window where the images are on this link to see it work.
Code Explanation
<div class="responsiveWidth">
...Conteúdo Responsivo...
<img src="http://i1.wp.com/www.24x7photography.com/wp-content/uploads/2010/08/random2.jpg?w=720" width="500">
</div>
<div class="staticWidth">
...Conteúdo Estático...
<img src="http://i1.wp.com/www.24x7photography.com/wp-content/uploads/2010/08/random2.jpg?w=720" width="500">
</div>
This 2 div's look exaclty the same, but here's where the magic happens
CSS
.staticWidth {
width:500px;
margin:10px;
border:1px solid #000;
}
.responsiveWidth {
width:100%; /* This says the div to stay always 100% of it's parent, in this case it's `body` because we don't have any div container */
margin:10px;
border:1px solid #000;
}
.responsiveWidth img{
width:100%; /* This will make the width of the image 100% as well, the height it's automattic because we didn't set one nor on HTML or CSS */
}

Answer 2

Ok, guys, I solved it. I never heard about the VW thing... And when I did, it worked. Here's the final solution. :)
#tamanhao {
position: relative;
left: 50%;
height: auto !important;
margin: 0px 0 0 -50vw;
width: 100vw;
}
#tamanhao img {
max-width: 100vw !important;
padding-top: 32px !important;
height: auto !important;
}
#videozao {
position: relative;
left: 50%;
max-height: 720px !important;
margin: 0px 0 0 -50vw;
width: 100vw;
}
#videozao .fve-video-wrapper {
margin-left: auto;
margin-right: auto;
max-width: 1280px !important;
max-height: 720px !important;
}
#videozao iframe {
max-width: 1280px !important;
max-height: 720px !important;
}
Thank you / Obrigado! :))))