26985 sujets

CSS et mise en forme, CSS3

Bonjour ! j'ai creer mon site et j'ai fait plusieur version avec @media (max-width=768px) je veux désactiver le scroll x ce que j'ai fait avec
  body {
    overflow-x: hidden;
  }


mais lorsque l'on ouvre la page sur mobile nous pouvons quand meme scroll sur le coter

Mon site si vous voulez verifier par vous meme : https://unknowww1.000webhostapp.com/#

Mes code


<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title> PurpleRain / IG </title>
    <link rel="icon" href="Favicon/tuxpi-removebg-preview__1_-removebg-preview.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- Css Link -->
    <link rel="stylesheet" href="Css/Header.css">
    <!-- Font Link -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:700&display=swap" rel="stylesheet">
  </head>
  <body>
    <!-- Navigation / Header -->
      <nav class="header">
        <div class="name-nav">
          <h1>PurpleRain</h1>
        </div>
        <ul class="link-nav" id="link">
          <li>
            <a href="#">Home</a>
          </li>
          <li>
            <a href="#">Another</a>
          </li>
          <li>
            <a href="#">Linkinbio</a>
          </li>
        </ul>
        <div class="burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
        </div>
      </nav>
      <script src="Js/Header.js"></script>
  </body>
</html>



* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

/* Header */

nav.header {
  width: 100%;
  min-height: 60px;
  background: linear-gradient(110deg, #212121 60%,#141414 60%);
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-family: 'Roboto', sans-serif;
}

.name-nav {
  color: #FCFCFC;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.link-nav {
  justify-content: space-around;
  display: flex;
  width: 30%;
}

.link-nav li {
    list-style: none;
}

.link-nav a {
  color: #FCFCFC;
  text-decoration: none;
  letter-spacing: 2px;
  font-weight: bold;
}

/* Burger */

.burger div{
  width: 20px;
  height: 2px;
  background-color: #FCFCFC;
  margin: 5px;
}

.burger {
  display: none;
}

/* Responsive */

@media screen and (max-width: 1024px) {
  .link-nav {
    width: 50%;
  }
}

/* Pour Mobile */

@media screen and (max-width: 768px) {

  .name-nav {
    position: absolute;
    left: 3%;
  }

  body {
    overflow-x: hidden;
  }

  .link-nav {
    position: absolute;
    top: 60px;
    height: 91vh;
    right: 0px;
    background-color: #212121;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    transform: translatex(100%);
    transition: transform 0.5s ease-in;
  }

  .activate-nav {
    transform: translatex(0%);
  }

  .burger {
    display: block;
    position: absolute;
    right: 3%;
    top: 3%;
    cursor: pointer;
  }
}


const navSlide = () => {
  const burger = document.querySelector('.burger');
  const nav = document.querySelector('.link-nav');

  burger.addEventListener('click', () => {
    nav.classList.toggle('activate-nav');
  });
}

navSlide();

Jean-Pierre-Bruneau a écrit :
je ne comprends pas, sur mon portable tout est parfait Smiley decu


Ah bon ? sur le mien je peux toujours scroll c'est un galaxy A50
Quel navigateur ? et en plus tu ne maîtrises rien dans ta page ...
C'est du reste amusant que tu ai affiché ton code ici pour que nous cherchions la pourquoi du comment et t'aider, alors que 30% de ton code est en Javascript .... Smiley confused

par exemple

const navSlide = () => {
  const burger = document.querySelector('.burger');
  const nav = document.querySelector('.link-nav');

  burger.addEventListener('click', () => {
    nav.classList.toggle('activate-nav');
  });
}

navSlide();

document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });

Modifié par Jean-Pierre-Bruneau (24 Jan 2020 - 16:34)
ou ça:

function getCookie(t){for(var e=t+"=",n=decodeURIComponent(document.cookie).split(";"),o=0;o<n.length;o++){for(var a=n[o];" "==a.charAt(0);)a=a.substring(1);if(0==a.indexOf(e))return a.substring(e.length,a.length)}return""}getCookie("hostinger")&&(document.cookie="hostinger=;expires=Thu, 01 Jan 1970 00:00:01 GMT;",location.reload());var wordpressAdminBody=document.getElementsByClassName("wp-admin")[0],notification=document.getElementsByClassName("notice notice-success is-dismissible"),hostingerLogo=document.getElementsByClassName("hlogo"),mainContent=document.getElementsByClassName("notice_content")[0],wpSidebar=document.getElementById("adminmenuwrap"),wpTopBarRight=document.getElementById("wp-admin-bar-top-secondary");if(null!=wordpressAdminBody&&notification.length>0&&null!=mainContent){var googleFont=document.createElement("link");googleFontHref=document.createAttribute("href"),googleFontRel=document.createAttribute("rel"),googleFontHref.value="https://fonts.googleapis.com/css?family=Roboto:300,400,600",googleFontRel.value="stylesheet",googleFont.setAttributeNode(googleFontHref),googleFont.setAttributeNode(googleFontRel);var css="@media only screen and (max-width: 576px) {#main_content {max-width: 320px !important;} #main_content h1 {font-size: 30px !important;} #main_content h2 {font-size: 40px !important; margin: 20px 0 !important;} #main_content p {font-size: 14px !important;} #main_content .content-wrapper {text-align: center !important;}} @media only screen and (max-width: 781px) {#main_content {margin: auto; justify-content: center; max-width: 445px;} .upgrade-btn-sidebar {display: none;} #wp-toolbar .top-bar-upgrade-btn {width: 52px; height: 46px !important; padding: 0 !important;} .top-bar-upgrade-btn__text {display: none;} .dashicons-star-filled.top-bar-upgrade-btn__icon::before {font-size: 28px; margin-top: 10px; width: 28px; height: 28px;}} @media only screen and (max-width: 1325px) {.web-hosting-90-off-image-wrapper {position: absolute; max-width: 95% !important;} .notice_content {justify-content: center;} .web-hosting-90-off-image {opacity: 0.3;}} @media only screen and (min-width: 769px) {.notice_content {justify-content: space-between;} #main_content {margin-left: 5%; max-width: 445px;} .web-hosting-90-off-image-wrapper {position: absolute; right: 0; display: flex; padding: 0 5%}} @media only screen and (max-width: 960px) {.upgrade-btn-sidebar {border-radius: 0 !important; padding: 10px 0 !important; margin: 0 !important;} .upgrade-btn-sidebar__icon {display: block !important; margin: auto;} .upgrade-btn-sidebar__text {display: none;}}  .web-hosting-90-off-image {max-width: 90%; margin-top: 20px;} .content-wrapper {z-index: 5} .notice_content {display: flex; align-items: center;} * {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} .upgrade_button_red_sale{box-shadow: 0 2px 12px -6px #cc292f; max-width: 350px; border: 0; border-radius: 3px; background-color: #ff5c62 !important; padding: 15px 55px !important;  margin-bottom: 48px; font-size: 14px; font-weight: 800; color: #ffffff;} .upgrade_button_red_sale:hover{color: #ffffff !important; background: rgba(255,92,98, 0.9) !important;} .upgrade-btn-sidebar {text-align:center;background-color:#ff5c62;max-width: 350px;border-radius: 3px;border: 0;padding: 12px; margin: 20px 10px;display: block; font-size: 12px;color: #ffffff;font-weight: 700;text-decoration: none;} .upgrade-btn-sidebar:hover, .upgrade-btn-sidebar:focus, .upgrade-btn-sidebar:active {background-color: rgba(255,92,98, 0.9); color: #ffffff;} .upgrade-btn-sidebar__icon {display: none;} .top-bar-upgrade-btn {height: 100% !important; display: inline-block !important; padding: 0 10px !important; color: #ffffff; cursor: pointer;} .top-bar-upgrade-btn:hover, .top-bar-upgrade-btn:active, .top-bar-upgrade-btn:focus {background-color: #ff5c62 !important; color: #ffffff !important;} .top-bar-upgrade-btn__icon {margin-right: 6px;}",style=document.createElement("style"),sheet=window.document.styleSheets[0];style.styleSheet?style.styleSheet.cssText=css:style.appendChild(document.createTextNode(css)),document.getElementsByTagName("head")[0].appendChild(style),document.getElementsByTagName("head")[0].appendChild(googleFont);var button=document.getElementsByClassName("upgrade_button_red")[0],link=button.parentElement;link.setAttribute("href","https://www.hostinger.com/hosting-starter-offer?utm_source=000webhost&utm_medium=panel&utm_campaign=000-wp"),link.innerHTML='<button class="upgrade_button_red_sale">Upgrade Now</button>',(notification=notification[0]).setAttribute("style","background-color: #f8f8f8; border-left-color: #ff5c62 !important;"),notification.className="notice notice-error is-dismissible";var mainContentHolder=document.getElementById("main_content");mainContentHolder.setAttribute("style","padding: 0;"),hostingerLogo[0].remove();var h1Tag=notification.getElementsByTagName("H1")[0];h1Tag.className="000-h1",h1Tag.innerHTML="Limited Time Offer",h1Tag.setAttribute("style","color: #32454c;  margin-top: 48px; font-size: 48px; font-weight: 700;");var h2Tag=document.createElement("H2");h2Tag.innerHTML="From $0.72/month",h2Tag.setAttribute("style","color: #32454c; margin: 20px 0 45px 0; font-size: 48px; font-weight: 700;"),h1Tag.parentNode.insertBefore(h2Tag,h1Tag.nextSibling);var paragraph=notification.getElementsByTagName("p")[0];paragraph.innerHTML="Don’t miss the opportunity to enjoy up to <strong>4x WordPress Speed, Free SSL and all premium features</strong> available for a fraction of the price!",paragraph.setAttribute("style",'font-family: "Roboto", sans-serif; font-size: 18px; font-weight: 300; color: #6f7c81; margin-bottom: 20px;');var list=notification.getElementsByTagName("UL")[0];list.remove();var org_html=mainContent.innerHTML,new_html='<div class="content-wrapper">'+mainContent.innerHTML+'</div><div class="web-hosting-90-off-image-wrapper"><img class="web-hosting-90-off-image" src="https://cdn.000webhost.com/000webhost/promotions/wp-inject-default-img.png"></div>';mainContent.innerHTML=new_html;var saleImage=mainContent.getElementsByClassName("web-hosting-90-off-image")[0];wpSidebar.insertAdjacentHTML("beforeend",'<a href="https://www.hostinger.com/hosting-starter-offer?utm_source=000webhost&amp;utm_medium=panel&amp;utm_campaign=000-wp-sidebar" target="_blank" class="upgrade-btn-sidebar"><span class="dashicons dashicons-star-filled upgrade-btn-sidebar__icon"></span><span class="upgrade-btn-sidebar__text">Upgrade</span></a>'),wpTopBarRight.insertAdjacentHTML("beforebegin",'<a class="top-bar-upgrade-btn" href="https://www.hostinger.com/hosting-starter-offer?utm_source=000webhost&amp;utm_medium=panel&amp;utm_campaign=000-wp-top-bar" target="_blank"><span class="ab-icon dashicons-before dashicons-star-filled top-bar-upgrade-btn__icon"></span><span class="top-bar-upgrade-btn__text">Go Premium</span></a>')}
SI c'est réglé tout est pour le mieux.
Mais pour d'autres qui se poseraient cette même question (et vu que tu n'as pas donné ta solution), il y a une propriété CSS faite pour ça : autoriser le scroll sur un smartphone (ça marche aussi pour autoriser le zoom par pincement) : touch-action.

En ajoutant ce code, on empêche le défilement, tout en autorisant le zoom si nécessaire.

body {touch-action : pinch-zoom;}