1486 sujets

Web Mobile et responsive web design

[Résolu] Landing page avec photos

Bonsoir à tous,

J'ai créé une landing page avec Bootstrap 4.1.1 qui s'affiche nickel sur desktop mais elle n'est pourtant pas responsive. Les images sont utilisées en background et ne s'adaptent pas comme il faut...

Je n'ai plus trop l'habitude de coder en html/css et je ne comprends pas ce qu'il se passe. Un indice sur ce que j'aurais mal fait ou oublié serait grandement apprécié Smiley smile

La page en construction : https://mistersmith.net/askjulie/askjulie.html
Le css : https://mistersmith.net/askjulie/css/default.css

Merci d'avance,
MrLLp
Modifié par MrLLp (31 Jul 2018 - 20:16)
Bonjour,
Tu voudrais quoi exactement ? le background-size:cover fonctionne bien il me semble,
que signifie "ne s'adaptent pas comme il faut" ?
Bonjour @MrLLp,
Je pense qu'en mobile il serait préférable d'avoir un seul block par ligne.
Tu peux donc remplacer les col-4 par col-12 col-md-4, comme suit
<div class="col-4 cblock-bg block-3">...</div>
devient
<div class="col-12 col-md-4 block-bg block-3">...</div>

Ce qui signifie qu'en mobile ta colonne prend une largeur de 12 colonnes et quand tu agrandis ton écran jusqu'à la taille "md" (supérieur à 768px), ta colonne fait une largeur de 4 colonnes.

Voilà, en espérant que cela puisse t'aider
Meilleure solution
Bonjour et merci pour vos réponses !

@farang, je n'avais pas bien précisé que c'est la version smartphone qui m'embêtait mais @Tizano a parfaitement trouvé ce qui n'allait pas. C'était très bête mais j'avais oublié le fonctionnement de base de Bootstrap Smiley cligne

Encore merci, je repars là dessus pour peaufiner le reste.

Bonne soirée à vous,
MrLLp
Sujet clos
Aller à