[resolu] Iphone 4 et boostrap

Bonjour à tous,

J'ai un petit carré et à côté un titre et ils sont collés en mode portrait sur iphone 4 (et certainement sous d'autres appareils) et non en mode paysage...

Je tourne en rond depuis quelque temps déjà

Je teste avec l'extension de chrome.

Voici l'url : http://vaurel.free.fr/boostrap/test2.html

Carré + titre en dessous de "our service"

Quelqu'un a t'il une idée?

Merci
Modifié par oceane751 (27 Jan 2015 - 00:48)

Salut,

.col-xs-1 {
width: 8.33333333%;
}

Sur une taille iphone (simulé avec Chrome) ça donne 23px, alors que ton image qui est dedans en fait 33 de large. Ce deborde !

Tu prévois de mettre autre chose qu'un carré gris ? Sinon c'est carrément plus safe/sympa/mieux/bien de faire ca juste en css avec un background-color.
Modifié par _laurent (26 Jan 2015 - 23:34)

peut etre qu'avec un patch du style

@media (max-width: 320px) {
	.read  h1 { margin-left: 20px; }
	
}
}

NOTE - j'essaye de décaler le titre sur la droite, donc le "20px" est au pif
Si ca ne fonctionne pas essayer de donner une marge à l'image.

exemple:

@media (max-width: 320px) {
	.read  img { margin-right: 20px; }
	
}
}

c'est peut être un début d'idée

_laurent a écrit :
Salut,

.col-xs-1 {
width: 8.33333333%;
}

Sur une taille iphone (simulé avec Chrome) ça donne 23px, alors que ton image qui est dedans en fait 33 de large. Ce deborde !

Tu prévois de mettre autre chose qu'un carré gris ? Sinon c'est carrément plus safe/sympa/mieux/bien de faire ca juste en css avec un background-color.

oui j'ai essayé avec un background-color mais c'était pire voir ingérable!
c'est pour ça que j'ai décidé de mettre une image..
le height de mon image fait 33px;

Mais je pourrais éventuellement re-essayer...

poilozorey a écrit :
peut etre qu'avec un patch du style

@media (max-width: 320px) {
	.read  h1 { margin-left: 20px; }
	
}
}

super ça marche!
mais je peux le mettre directement dans mon fichier css soit boot2.css, ça ne pose pas de problème?

J'ai appris une chose et suis content, car je ne savais pas que l'on pouvais rajouter des @media car je croyais que bootstrap gérait tout!

aie!!!

soucis avec iphone 6

j'ai mis :

@media (max-width: 375px) {
	.read  h1 { margin-left: 30px; }
	
}
}

et ça ne le prend pas du tout
idem pour l'iphone 6 plus

@media (max-width: 414px) {
	.read  h1 { margin-left: 30px; }
	
}
}

@media (max-width: 320px) {
	.read  img { margin-right: 20px; }
	
}
}

ya une } en trop dans ton code

c'est pour ça que ça ne marchait pas !

merci beaucoup pour votre aide aussi rapide!

à bientôt!
Modifié par oceane751 (27 Jan 2015 - 00:47)