Responsiveness on iphone

Question

Responsiveness on iphone

Navigation

#1 by (0 votes)

1

Developed with my colleagues a theme in Wordpress that is very cool on several devices, however the boy who will receive the site uses an iPhone 5 and in this smartphone the figures have been "stretched". I looked for several issues related to meta tag or viewport , and none solved. Can anyone give me a light on responsiveness on iPhone?

Site link: link

Follow the code below:

content{
    margin-top: 30px;
    min-height: 520px;
    overflow:hidden;
    margin-bottom: 10px;
}
.content2{
    margin-top: 30px;
    min-height: 600px;
    overflow:hidden;
}
.content .resume{
	max-width: 318px;
 }
.content h2{
	max-width: 318px;
}
.content2 .resume{
	max-width: 318px;
 }
.content2 h2{
	max-width: 318px;
}
@media screen and (min-width: 767px){
    .content, .content2{
        float: left;
    }
}
@media screen and (max-width: 766px){
    .content, .content2{
        float: none;
        min-height: auto;
        margin-right: 20%;
    }
}
.categoryBox{
    margin-top: 10px;
    padding-right: 20px;
    padding-bottom: 1px;
    overflow: hidden;
    height: 20px;
    font-family: 'LatoBlack';
    text-transform: uppercase;
}
.categoryBox span {
    margin-right:10px;
    text-transform: uppercase;
    font-size: 12px !important;
    font-style: normal;
    font-weight: bold;
    color: #fff !important;
    margin-bottom: 5px !important ;
}
.categoryBox2{
    margin-top: 10px;
    padding-right: 20px;
    padding-bottom: 1px;
    overflow: hidden;
    height: 20px;
    font-family: 'LatoBlack';
    text-transform: uppercase;
}
.categoryBox2 span {
    margin-right:10px;
    text-transform: uppercase;
    font-size: 12px !important;
    font-style: normal;
    font-weight: bold;
    color: #fff !important;
    margin-bottom: 5px !important   ;
}
.categoryBox a{
    font-size: 12px;
    color: #fff !important;
    background-color: #D22800;
    padding: 5px;
    font-family: "LatoBlack";
    padding-right: 10px;
}
.categoryBox2 a{
    font-size: 12px;
    font-family: "LatoBlack";
    background-color: #7DBEA0;
    padding: 5px;
    color: #fff !important;
    padding-right: 10px;
}

<div class="content col-xs-12 col-sm-6 col-md-4 col-lg-4">
    <a class="featuredImage" href="AQUI VAI LINK, NÃO TENHO PONTOS PARA POSTAR"><img width="679" height="444" src="AQUI VAI LINK, NÃO TENHO PONTOS PARA POSTAR" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="AQUI VAI LINK, NÃO TENHO PONTOS PARA POSTAR" sizes="(max-width: 679px) 100vw, 679px"></a>
    <div class="categoryBox"> 
        <a href="AQUI VAI LINK, NÃO TENHO PONTOS PARA POSTAR"><span class="fa fa-book"> </span>CULTURA</a>
    </div>
		<h2><a href="AQUI VAI LINK, NÃO TENHO PONTOS PARA POSTAR" rel="bookmark" title="Abrir Da Itália para Santa Maria">Da Itália para Santa Maria</a></h2>
	<div class="resume">
		<a href="AQUI VAI LINK, NÃO TENHO PONTOS PARA POSTAR" rel="bookmark" title="Abrir Da Itália para Santa Maria">
        <p>Andrea Roberto, vencedor do Concurso Internacional “José Tomás”, realiza concerto na UFSM</p>
		</a>
	</div>
</div>

Here's the HTML and CSS responsible for the part I'm referring to. On the iPhone it looks like it squeezes the image to fit.

html css wordpress responsivo

asked by anonymous 23.08.2017 / 20:33

1 answer

How to update SDK Tools? How to perform a select with 2.7 billion records across the table?

score 0 · Answer 1

Your featured images ( .featuredImage img ) have a fixed height and width (this is only one of the two occurrences I found in your code):

.featuredImage img{
    height: 222px;
    width: 318px;
    margin-bottom:1%;
}

This essentially invalidates the whole idea behind responsiveness. Any image that naturally does not have this aspect ratio (approximately 0.69 in this case) will actually "squeeze" to fit those dimensions, causing distortion. Removing the height directive you already realize that this is no longer the case.

I still recommend going further and doing

.featuredImage img{
    max-width: 100%;
}

so that the image fits your container , but never exceed its natural dimensions. You would also leave the margin-bottom in charge of the container of the image (in which case the bootstrap should take care of it).