médias requête de travail dans Codepen mais pas si éditeur de texte/chrome

-1

J'utilise éditeur de texte entre parenthèses et tout fonctionne très bien de (fonctionne même par des parenthèses, comme il le fait avec Codepen) à part une chose:médias requête de travail dans Codepen mais pas si éditeur de texte/chrome

Je suis en utilisant une requête de médias CSS pour définir un point d'arrêt de sorte que j'ai seulement une colonne dans un max-width 537px.

@media (max-width: 537px) { 
.custom-column { 
    width: 100%; 
} 
} 


<div class="col-sm-4 col-xs-6 custom-column"> 
     <img src="#" alt="#" width="100%"> 
     <p>Me</p> 
     </div>

Pour une raison quelconque, cela fonctionne dans Codepen mais pas lorsque je lance mon éditeur de texte dans Chrome. Est-ce que c'est quelque chose à voir avec mon élément 'tête' peut-être?

<!DOCTYPE html="en"> 
<html lang> 
    <head> 

<meta charset="utf-8"> 

<title>Title</title> 


<meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" type="text/css" href="main.css"> 

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<!-- Icons for footer --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css"> 

<!-- jQuery library --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

</head>

et voici le codepen: [http://codepen.io/SimmoSim/pen/wJgpwg?editors=1100][1]

Source

2017-03-15 sim

Je ne vois pas le point de rupture de 537px dont vous parlez ... – hellojason

Donc, ce que vous voulez dire est que l'image couvre toute la largeur de l'écran à la largeur <537px –

en double de http://stackoverflow.com/questions/28213261/bootstrap- maxcdn-ne-fonctionne pas # 28213627 –

Je résolu cette question. J'ai aussi eu ce problème avec Mozzilla, et je l'ai corrigé en félicitant votre lien bootstrap cdn et en utilisant mon lien bootstrap.

Je l'ai compris, parce que comme cela a fonctionné avec le stylo de code, j'ai pensé qu'il pourrait être connecté à la feuille de style bootstrap cdn ne chargeant pas.

C'est le bootstrap cdn J'utilise, je l'inclure dans mes tags d'en-tête:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

    <link href="main.css" rel="stylesheet" /> 
    </head>

Ceci est le reste de mon mon code de travail:

<html> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

     <link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet"> 
     <link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet"> 
     <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"> 
     <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 


     <link rel="stylesheet" type="text/css" href="magicstyle.css"> 

     </head>  
     <body> 
<!DOCTYPE html="en"> 
<html lang> 
    <head> 

<meta charset="utf-8"> 

<title>Title</title> 


<meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" type="text/css" href="main.css"> 

<!-- Latest compiled and minified CSS --> 
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">--> 

<!-- Icons for footer --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css"> 

<!-- jQuery library --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

</head>  
</body> 

<nav class="navbar navbar-inverse navbar-static-top"> 
    <div class="navbar-header"> 
    <a class="navbar-brand" href="#">Simmo Simpson Web Design</a> 
     <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </a> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
      <li><a href="#home">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#portfolio">Portfolio</a></li> 
      <li><a href="#contact" >Contact</a></li> 
     </ul> 
    </div> 
</nav> 


<div id="about" class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-5 custom-about"> 
      <img src="http://res.cloudinary.com/simmosim/image/upload/v1488528687/Me_hkykum.jpg" class="img-circle" alt="My face" width="100%"> 
     </div> 

     <div class="col-xs-7 custom-about"> 
      <h1>Simmo Simpson</h1> 
      <h4>Freelance Web Design & Photography<br><br> 
       Feel free to take a look at my work</h4> 
      </div> 
    </div> 



<section class="container-fluid" id="portfolio"> 

    <h1>PORTFOLIO</h1> 
     <div> 
      <div class="col-sm-4 col-xs-6 custom-column"> 
      <img src="http://res.cloudinary.com/simmosim/image/upload/v1488528687/Me_hkykum.jpg" alt="My face" width="100%"> 
      <p>Me</p> 
      </div> 

      <div class="col-sm-4 col-xs-6 custom-column"> 
       <img src="http://res.cloudinary.com/simmosim/image/upload/v1488528687/Me_hkykum.jpg" alt="My face" width="100%"> 
      <p>Me</p> 
      </div> 

      <div class="col-sm-4 col-xs-6 custom-column"> 
        <img src="http://res.cloudinary.com/simmosim/image/upload/v1488528687/Me_hkykum.jpg" alt="My face" width="100%"> 
      <p>Me</p> 
      </div> 


      <div class="col-sm-4 col-xs-6 custom-column"> 
      <img src="http://res.cloudinary.com/simmosim/image/upload/v1488528687/Me_hkykum.jpg" alt="My face" width="100%"> 
      <p>Me</p> 
      </div> 

      <div class="col-sm-4 col-xs-6 custom-column"> 
       <img src="http://res.cloudinary.com/simmosim/image/upload/v1488528687/Me_hkykum.jpg" alt="My face" width="100%"> 
      <p>Me</p> 
      </div> 

      <div class="col-sm-4 col-xs-6 custom-column"> 
        <img src="http://res.cloudinary.com/simmosim/image/upload/v1488528687/Me_hkykum.jpg" alt="My face" width="100%"> 
      <p>Me</p> 
      </div> 
     </div> 
</section> 

</div>  

    <h1 id="contact">CONTACT ME</h1> 
     <div> 
      <P style="padding-left:5%" class="text-right">Need a website? Some quality photography?<br><br>Drop me a line on your prefered social media<br> platform by clicking a link below.<br><br> 
       Want some advice to become more productive?<br><br>Check out my blog by clicking the W icon.<br><br> 
      </P> 
     </div> 

<div class="footer-social-icons"> 
    <ul class="social-icons custom-social-icon"> 
     <li><a href="https://www.facebook.com/simmophotography" target="_blank" class="social-icon"> <i class="fa fa-facebook custom-social-icon"></i></a></li> 
     <li><a href="https://twitter.com/TweetSimmo" target="_blank" class="social-icon"> <i class="fa fa-twitter custom-social-icon"></i></a></li> 
     <li><a href="https://www.linkedin.com/in/simpsonuk/" target="_blank" class="social-icon"> <i class="fa fa-linkedin custom-social-icon"></i></a></li> 
     <li><a href="https://www.instagram.com/simmosimpson/" target="_blank" class="social-icon"> <i class="fa fa-instagram custom-social-icon"></i></a></li> 
     <li><a href="https://nomadapprentice.wordpress.com/" target="_blank" class="social-icon"> <i class="fa fa-wordpress custom-social-icon"></i></a></li> 
     <li><a href="https://github.com/simmosim" target="_blank" class="social-icon"> <i class="fa fa-github"></i></a></li> 
    </ul> 
    <br> 
</div> 

    <script 
     src="http://code.jquery.com/jquery-3.1.1.js" 
     integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" 
     crossorigin="anonymous"></script> 
    <script 
    src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
    <script src="script.js"></script>  

</body> 
</html>

Source

2017-03-15 08:17:42

Merci @Fabrizio Cela a fonctionné avec un peu d'altération (j'ai dû déplacer les éléments du script juste avant l'étiquette de corps de fermeture. – sim

@sim Vous ne devriez pas poster de question sur SO pour ce problème car il s'agit d'un doublon de http://stackoverflow.com/questions/28213261/bootstrap-maxcdn-not-working#28213627 –

médias requête de travail dans Codepen mais pas si éditeur de texte/chrome

Répondre

Questions connexes