Problème scroll hotrizontal + affichage fenêtre modale

Bonjour,


Je finalise un site web et je rencontre un pb bloquant en CSS :

J'ai un scroll horizontal qui apparait sur les petits écrans d'ordi (type MacBook 13")

Je sèche vraiment donc si quelqu'un avait LA bonne solution je lui en serait bien reconnaissant !

Sinon j'ai insérer une fenêtre modale pour les mentions légales qui s'ouvre toujours après avoir fait défiler la grande page du site jusqu'en haut. Et la pareil je me casse les dents.

Merci d'avance en tout cas.

PS : Au passage, si d'autres choses vous choquent n'hésitez pas !
Modifié par UnCoindPixel (04 Aug 2013 - 14:21)

Salut,

sur MBP 13" le problème semble venir de "voici les bureaux de l'espace veyette", car si on scrolle on voit que le fond devient blanc avec juste ce texte qui dépasse...

Salut,

Le problème de scroll horizontal vient de ta div #infini dans header.
Moi je vois le scroll horizontal tout le temps sur Firefox (Mac), dans n'importe quelle résolution.

Edit : Pour ton problème de fenêtre modal je pense que le problème vient de ton href qui est une ancre vers la div #modal-text. Et comme il ne la trouve pas sur la page il remonte tout en haut.
Du coup pour contourner le problème tu peux par exemple modifier le lien de tes mentions légales comme ceci :

<a id="#modal-text" class="call-modal" href="#modal-text">Crédits et Mentions légales</a>

Sinon pour les remarques concernant le site, tu as oublié de mettre un lien sur le logo du site pour revenir à la page d'accueil.

Voili voilou, bon courage pour ton site !
Modifié par Raphi (05 Aug 2013 - 09:38)

Ok merci ! je vais regarder ça.

Pas de lien sur le logo car ça sera un one-page-site

Apparemment le pb ne vient pas de la div infini... Je ne comprends pas d'ou vient le pb c'est vraiment à se tirer les cheveux...

Ah mince...
Pourtant quand je la supprime avec Firebug je n'ai plus le scroll horizontal.

Edit : plus précisément c'est le right:-50px qui pose problème chez moi.
Modifié par Raphi (07 Aug 2013 - 20:57)

La solution pour ta div infini :
Tu supprimes cette div, tu retires toutes les propriétés css qui lui correspondent.
Ensuite tu ajoutes les propriétés suivantes à header :

header{
background-image: url("../img/infini.png");
background-position: 105% 135%;
background-repeat: no-repeat;
}

Ton problème sera normalement corrigé, en plus tu t'économises une div.

Je crois que je viens de comprendre pourquoi tu disais que ça ne fonctionnait pas.
En fait tu as d'autres choses qui dépassent :
#aide_bureaux devrait être intégré différement car il dépasse et créer une scrollbar
Tu as également tes .btn_download et .btn_contact qui sont trop grands (il faut réduire le width à 270px).

Super problème résolu

Plus que cette satanée fenêtre modale

Salut !

Regarde mon 1er post je pense que ça doit corriger le problème pour la fenêtre modale.