Bonjour
Ma question de la semaine :
Est-il possible de modifier la largeur d’un export d’un recette Récit pour son affichage dans le navigateur.
J’ai beau chercher dans le fichier index.html exporté, je n’ai pas trouver.
Bon weekend à tous et toutes
La largeur est censée être celle du navigateur web, avec un maximum pour éviter que ça devienne illisible : Documentation de do•doc
Avec un peu de CSS dans le fichier index.html tu peux modifier ça :
<style>
.m_storyPublication .m_storyPublication--content {
max-width: 1400px !important;
}
</style>
(à mettre n’importe où dans le fichier index.html)
Bonjour
Certes cela permet de modifier la largeur de la page mais comment jouer sur la largeur des médias, leur alignement etc. ?
Il faut retirer le max-height qui s’applique sur certains éléments comme les images. Par exemple :
<style>
.m_storyPublication .m_storyPublication--content {
max-width: 1400px !important;
}
.m_mediaStory .mediaContainer.type-image img {
max-height: none;
}
</style>
Utiliser l’inspecteur web pour identifier les propriétés à modifier, c’est plus simple. Tu maitrises un peu @cdesomer ?
Merci de cette réponse.
Je ne maitrise pas assez l’inspecteur web et ai plus l’habitude des regles css basiques. Je vais fouiller un peu.
Bonne journée
Voici les lignes de style que j’ai ajouté après <body…>
<style>
.m_storyPublication .m_storyPublication--content {
max-width: 75% !important; max-height: none;
}
.m_mediaStory .mediaContainer.type-image img {
max-height: none; margin: auto;
}
.m_mediaStory .mediaContainer.type-video {
max-height: none;
}
.m_mediaStory .mediaContainer.type-text {font-family: Verdana; font-size: 2em; text-align: center;}
</style>
Cela modifie un peu la page. Je cherche encore.
Autre chose à prendre en compte : les images sont dans une résolution optimisée pour cette largeur de colonne.
Ici c’est une image de 1600 pixels de large, et la propriété css max-width: 100%; veut dire « l’image n’est jamais affichée plus grande qu’elle n’est réellement » (donc maximum 1600 pixels de large).
