Problème CSS - Responsive Design

Résolu/Fermé
ducrom Messages postés 6 Date d'inscription lundi 26 mai 2014 Statut Membre Dernière intervention 27 mai 2014 - Modifié par ducrom le 26/05/2014 à 21:10
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 27 mai 2014 à 03:23
Bonjour,

Je dois actuellement écrire une feuille CSS pour permettre à un site Web de s'afficher correctement sur Smartphones ainsi que sur Desktop.

Voici la structure du code :


Voilà l'apparence du site sur Desktop :



Voilà le problème, avec une résolution inférieure, mon bloc des langues tombe en bas ainsi que l'imagine "Abbaye d'Hauterive". De plus, j'aimerais que sur Smartphones, la structure affiche 2 colonnes avec les images et leurs descriptions respectives.


Voici déjà une partie de mon code, (#languages-choice me permet de choisir la langue sur la page d'accueil, ça c'est bon)


Voici le résultat que j'aimerais obtenir en gros


Merci à toutes et à tous de m'avoir lu et pour l'aide potentielle ;)


2 réponses

ducrom Messages postés 6 Date d'inscription lundi 26 mai 2014 Statut Membre Dernière intervention 27 mai 2014
26 mai 2014 à 23:08
Est-ce possible avec une structure comme ça en base ?

<div row>
<div col1></div>
<div col2></div>
<div col3></div>
<div col4></div>
</div row>
<div row>
<div col1></div>
<div col2></div>
<div col3></div>
<div col4></div>
</div row>

J'aimerais faire 2colonnes seulement en CSS
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
27 mai 2014 à 03:23
salut
sur smartphone et autres mobiles
oublie les doubles colonnes
en général sur ces média on ne fait pas "ho regarde comme mon design il est zoli!!
on affiche les infos les unes en dessous des autres et c'est déjà bien que ca s'affiche sur ces medias qui a la base sont faites pour téléphoner mais ou des gars qui ont de la ressource se sont dit : ils vont payer un max et en échange il iront sur le web (sic).
De plus le code sous forme d'image que tu as posté est illisible meme en zoomant (avec un pc)
0