Responsiveness on iphone

Asked

Viewed 721 times

1

I developed with my colleagues a theme in Wordpress that is pretty cool on various devices, but the boy who will receive the site uses an iPhone 5 and this smartphone the figures were "stretched". I looked for several problems related to meta tag or viewport, and none of them did. Can someone give me a light on responsiveness on iPhone?

Website link: http://www.ufsm.br/arco

Follows code:

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 is the HTML and CSS responsible for the part I’m referring to. On iPhone seems to tighten the image to fit.

Imagem iPhone 5 Imagem de outro celular

html css wordpress responsive
  • 1

    It would be interesting to post at least one print, the html code and the css of the problem you are having, if it doesn’t get hard to parse.

  • Post a print of how the figures look normal and how they look on your iPhone, as well as the HTML/CSS part of it. I develop responsive websites and I think I’ve had this problem with iPhone, only I’d need to see the code to remember what it might be. It may be browser compatibility issue, which renders some codes with a little difference from others.

  • See if a style object-fit: cover; in <img /> solve your problem

1 answer

0

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

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

Which essentially invalidates the whole idea behind responsiveness. Any image that naturally does not have this ratio (approximately 0.69 in this case), will actually "tighten" to suit these dimensions, causing the distortion. Removing the directive height you already realize that it stops happening.

I recommend going even further and do

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

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

  • These measurements were specified by the staff of the magazine, we have to keep them, I understand this part of the responsiveness, but as it is in the images that upei, what happens, and happens only on the iPhone, is that it presses the images, even with set size. If you compare it to the other image, you can see that it doesn’t happen. What I wanted to know is if the iPhone treats px different than other smartphones.

Browser other questions tagged html css wordpress responsive

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