Decallage mise en page sur smart responsive ou css

Bonjour à tous,

j'ai un classic bandeau d'avertissement utilisation des cookies qui fonctionne en écran d'ordinateur standard mais qui une fois sur smartphone se délite en hauteur et gâche toute la page

Par ailleurs sur certains navigateur le bouton fermer la fenètre, ne fonctionne que de manière aléatoire

Le code étant on ne peut plus simple, est-ce que l'origine du bug est dans le CSS?

Merci

<!-- Div mention légale cookie -->
{# Styles #}
<style>
    #block_mention_legale_cookies{
        background-color: #E9E9E9;
        opacity: 1;
        z-index: 100;
        margin-left: 30px;
        margin-right: 30px;
        padding-top: 20px;
        padding-left: 50px;
        padding-right: 50px;
        padding-bottom: 20px;
        text-align: center;
        position: fixed;
        width: 100%;
    }
    #block_mention_legale_cookies_text{
        margin-bottom: 20px;
        padding-left: 180px;
        padding-right: 180px;
    }
</style>
{# Contents #}
<div class="mention_legale" id="block_mention_legale_cookies">
    <div id="block_mention_legale_cookies_text">
        <p>
            Attention : En poursuivant votre navigation sur ce site, 
            vous acceptez l’utilisation de Cookies qui nous permettent notamment de mesurer l’audience de notre site 
            et de vous proposer des contenus, services et publicités adaptés à vos centres d’intérêt. 
        </p>
    </div>
    <div class="inline" style="float: right">
        <a href="{{path('static', {page:'charte-de-confidentialite'})}}"> En savoir plus </a>
        &nbsp;&nbsp;
        <button class="btn btn-sm btn-success" id="btn-close-allow-cookies" >Ok</button>
    </div>
</div>

Merci de cette info.

J'ai oublié de te préciser que je suis débutant et si tu peux me préciser ce que tu entends par

a écrit :

tu devrais largement les réduire grâce aux mediaqueries.

Cézig

Je rame !!!

Pour l'instant j'en suis là et mon block se cramponne à gauche de la page (en revanche ça à l'air de m'avoir remis le bouton OK en fonction

   #block_mention_legale_cookies{
        background-color: #E9E9E9;
        opacity: 1;
        z-index: 100;
        margin-left: 5px;
        margin-right: 5px;
        padding-top: 8px;
        padding-left: 8px;
        padding-right: 8px;
        padding-bottom: 8px;
        text-align: center;
        position: fixed;
        width: 1140px;
    }
    #block_mention_legale_cookies_text{
        margin-bottom: 20px;
        padding-left: 10px;
        padding-right: 10px;
    }

Page de test en ligne :

test . louer-en-france . com

comment peux-je avoir un bandeau sur toute la largeur avec texte centré qui ne me mette pas toute la page par terre

Merci
Merci

Je reviens vers vous avec la même demande, ce code me mets le bazar dans tout le responsivDesign du site et comme c'est celui de la page d'accueil, c'est un peu (en fait carrément) ch...

Comme c'est un problème urgent et que je suis incapable d'assimilé toutes les infos, y aurait-il un développeur qui aurait la gentillesse de me corriger toutes les anomalies SVP.

Je pense que vous aurez compris que c'est le bandeau légal d'acceptation des Cookies qui (devrait) se trouver en haut de page en pleine largeur et se fermer après acceptation des cookies.

Il a des bug qui le mette complétement à la vertical dans certain navigateur et peut-être un conflit entre la balise text et celle du pavé de fond
Dans d'autre (chrome+W8, par exemple) il est potable mais complètement à gauche

Promis quand j'aurai résolu mes 4 ou 5 bug majeur je reviens manger tous les tutos du forum

Merci
Cézig

<!-- Div mention légale cookie -->
{# Styles #}

<style>
    #block_mention_legale_cookies{
        background-color: #E9E9E9;
        opacity: 1;
        z-index: 100;
        margin-left: 5px;
        margin-right: 5px;
        padding-top: 8px;
        padding-left: 8px;
        padding-right: 8px;
        padding-bottom: 8px;
        text-align: center;
        position: fixed;
        width: 1140px;
    }
    #block_mention_legale_cookies_text{
        margin-bottom: 20px;
        padding-left: 10px;
        padding-right: 10px;
    }

</style>
{# Contents #}
<div class="mention_legale" id="block_mention_legale_cookies">
    <div id="block_mention_legale_cookies_text">
        <p>
            Attention : En poursuivant votre navigation sur ce site, 
            vous acceptez l’utilisation de Cookies qui nous permettent notamment de mesurer l’audience de notre site 
            et de vous proposer des contenus, services et publicités adaptés à vos centres d’intérêt. 
        </p>
    </div>
    <div class="inline" style="float: right">
        <a href="{{path('static', {page:'charte-de-confidentialite'})}}"> En savoir plus </a>
        &nbsp;&nbsp;
        <button class="btn btn-sm btn-success" id="btn-close-allow-cookies" >Ok</button>
    </div>
</div>