サイズ変更時に要素が移動する（テキスト/画像）

My CodePen Website サイズ変更時に要素が移動する（テキスト/画像）

あなたが上に提供されたリンクに行くなら、あなたはすべてがうまく見えることを見るでしょう。要素、テキストと画像の両方が均等に配置されます。

しかし、私はウィンドウのサイズを変更すると、それらは定位置から飛び出します。私はブートストラップを使用しているので、私はそれが画面のサイズに基づいて調整し、収容する列を定義したと思った。私はここで間違って何をしていますか？ Media Queriesの問題ですか？

jQuery(document).ready(function($){ 
 
$('a').click(function(){ \t 
 
var hashindex = $(this).attr("href").indexOf('#'); 
 
var hreflen = $(this).attr("href").length; 
 
var anchortag = $(this).attr("href").substr(hashindex, hreflen); 
 
$('html, body').animate({ 
 
scrollTop: $(anchortag).offset().top -100 
 
}, 1200); 
 
return false; 
 
}); 
 
}); 
 

 

 
$(document).ready(function() { 
 
     $('.progress .progress-bar').css("width", 
 
       function() { 
 
        return $(this).attr("aria-valuenow") + "%"; 
 
       } 
 
     ) 
 
    });

@import url('https://fonts.googleapis.com/css?family=Exo+2:100,200,300,400,500,600,700,800,900'); 
 

 

 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    max-width: 1440px; 
 
} 
 

 
.container-fluid { 
 
    padding: 0px; 
 
} 
 

 
.navbar-brand { 
 
    position: relative; 
 
    top: -8px; 
 
} 
 

 
.navbar-nav li { 
 
    color: #666666; 
 
} 
 

 
.nav li a:hover { 
 
    color: black; 
 
} 
 

 
.navbar-collapse { 
 
    margin: 0px 25px; 
 
} 
 

 
.jumbotron { 
 
    position: relative; 
 
    top: -95px; 
 
    width: 100%; 
 
    height: 120vh; 
 
    overflow: hidden; 
 
} 
 

 
.jumbotron .container { 
 
    position: relative; 
 
    z-index: 2; 
 
    color: #ffffff; 
 
} 
 

 
.jumbotron:after { 
 
    content: ""; 
 
    position: absolute; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background: url("http://www.incimages.com/uploaded_files/image/1940x900/software-computer-code-1940x900_35196.jpg"); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    -webkit-filter: blur(5px); 
 
    filter: blur(5.5px); 
 
    width: 100%; 
 
} 
 

 
.jumbotron .qBio { 
 
    position: relative; 
 
    top: 300px; 
 
    font-size: 33px; 
 
    font-weight: 300; 
 
    font-family: 'Exo 2'; 
 
    z-index: 98; 
 
} 
 

 
.sub-bio { 
 
    font-family: "Exo 2"; 
 
    font-size: 26px; 
 
    font-weight: 100; 
 
} 
 

 
.aboutSection { 
 
    position: relative; 
 
    top: -75px; 
 
} 
 

 
.picMike { 
 
    position: relative; 
 
    border-radius: 100%; 
 
    border: solid 3px black; 
 
    padding: 3px; 
 
    height: auto; 
 
    top: -15%; 
 
    margin: 0 auto; 
 
} 
 

 
.aboutMe { 
 
    font-size: 50px; 
 
    font-family: 'Exo 2'; 
 
    font-weight: 400; 
 
    margin: 0px auto 30px auto; 
 
    text-shadow: 4px 4px 14px rgba(150, 150, 150, 1); 
 
    padding-bottom: 10px 
 
} 
 

 
.blurbQuote { 
 
    position: relative; 
 
    max-width: 50%; 
 
    top: 20px; right: 50px; 
 
    max-height: 100%; 
 
} 
 

 
.blurb { 
 
    font-family: 'Exo 2'; 
 
    font-weight: 300; 
 
    margin: 0 5%; 
 
} 
 

 
.hideMeQuote { 
 
    position: relative; 
 
    max-width: 50%; 
 
    top: 20px; right: 50px; 
 
    max-height: 100%; 
 
} 
 

 
.hideMe { 
 
    font-family: 'Exo 2'; 
 
    font-weight: 300; 
 
    position: relative; 
 
    top: -10px; margin: 0 25%; 
 
    width: 200%; 
 
} 
 

 
.skillSon { 
 
    margin: 50px auto; 
 
} 
 

 
.skillsBar { 
 
    font-family: 'Exo 2'; 
 
    font-weight: 300; 
 
    padding-bottom: 50px; 
 
} 
 

 
.skill { 
 
    font-family: 'Exo 2'; 
 
    font-weight: 200; 
 
} 
 

 
.val { 
 
    font-family: 'Exo 2'; 
 
    font-weight: 200; 
 
} 
 

 
.progress { 
 
    height: 40px; 
 
    margin: 15px auto; 
 

 
} 
 
.progress .skill { 
 
    line-height: 40px; 
 
    padding: 0; 
 
    margin: 0 0 0 20px; 
 
    text-transform: uppercase; 
 
} 
 
.progress .skill .val { 
 
    float: right; 
 
    margin: 0 20px 0 0; 
 
} 
 

 
.progress-bar { 
 
    text-align: left; 
 
    transition-duration: 6s; 
 
} 
 

 
.portfolio { 
 
    margin-top: -100px; 
 
} 
 

 
.myPortfolio { 
 
    font-family: 'Exo 2'; 
 
    font-weight: 300; 
 
    font-size: 35px; 
 
} 
 

 
.sub-head { 
 
    font-family: 'Exo 2'; 
 
    padding-bottom: 75px; 
 
    font-weight: 200; 
 
} 
 

 
.port-Text { 
 
    font-family:'Exo 2'; 
 
    font-weight: 200; 
 
} 
 

 
.thumbnail > img { 
 
    display: block; 
 
    max-width: 100%; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 

 
.portfolio { 
 
    position: relative; 
 
    top: 70px; 
 
    font-weight:300; 
 
} 
 

 
.portfolio h3 { 
 
    font-weight: 400; 
 
} 
 

 
.thumbnails { 
 
    list-style: none; 
 
} 
 

 
.thumbnail { 
 
    max-height: 350px; 
 
} 
 

 
.caption { 
 
    margin-top: -20px; 
 
} 
 

 
.nowrap { 
 
    white-space: nowrap ; 
 
} 
 

 
.thumbnails li { 
 
    padding-bottom: 50px; 
 
} 
 

 
.myWork { 
 
    -webkit-transition-duration: 0.4s; /* Safari & Chrome */ 
 
    transition-duration: 0.4s; 
 
} 
 

 
.myWork:hover { 
 
    filter: drop-shadow(16px 16px 10px rgba(0,0,0,0.9)); 
 
    transition-duration: .4s; 
 
    
 
} 
 

 
.placeHolderPic { 
 
    filter: blur(4.4px); 
 
    -webkit-transition-duration: 0.5s; /* Safari & Chrome */ 
 
    transition-duration: 0.5s; 
 
} 
 

 
.bott { 
 
    padding-bottom: 50px; 
 
} 
 

 
footer { 
 
    margin: 50px; 
 
    padding-top: 150px; 
 
    padding-bottom:75px; 
 
    height: 250px; 
 
} 
 

 
.socialTags { 
 
    margin: auto; 
 
    max-width: 100%; 
 
} 
 

 
.footTitle { 
 
    margin-top: -30px; 
 
    font-family: "Exo 2"; 
 
    font-weight: 500; 
 
    font-size: 55px; 
 
} 
 

 
footer ul { 
 
    list-style:none; 
 
    margin-left: 60px; 
 
    padding-bottom: 50px; 
 
} 
 

 
footer li { 
 
    display: inline-block; 
 
    padding: 75px 50px 0px 50px; 
 
} 
 

 
.footText { 
 
    font-family: 'Exo 2'; 
 
    font-weight: 300; 
 
} 
 

 
.breaker { 
 
    padding: 0px 0px 175px 0px; 
 
    position: relative; 
 
    top: 25px; 
 
    height: 1px; 
 
    width: 40%; 
 
    margin: 0 auto; 
 
    border-top: 1px solid #d9d9d9; 
 
} 
 

 
.breakerOne { 
 
    position: relative; 
 
    top: 125px; 
 
    height: 1px; width: 40%; 
 
    margin: 0 auto; 
 
    padding: 25px 0px 0px 0px; 
 
    border-top: 1px solid #d9d9d9; 
 
} 
 

 
.finalText { 
 
    font-weight: 200; 
 
    font-size: 15px; 
 
} 
 

 
.socialIcons { 
 
    -webkit-transition-duration: 0.4s; /* Safari & Chrome */ 
 
    transition-duration: 0.4s; 
 
} 
 

 
.socialIcons:hover { 
 
filter: drop-shadow(20px 10px 7px rgba(0,0,0,0.9)); 
 
    transition-duration: .5s;c 
 
}

<body data-spy="scroll" data-target=".navbar" data-offset="70"> 
 

 
    <!-- NAVIGATION BAR --> 
 
    
 
    <div class="container-fluid"> 
 
    <div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
      <span class="sr-only">Toggle Navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
     <span class="navbar-brand"> Michael Adamski <br> -Web Developer- </span> 
 
     </div> 
 
     <div class="navbar-collapse collapse pull-right text-center"> 
 
     <ul class="nav navbar-nav"> 
 
      <li> <a href="#jumboHead" class="active">Home</a> </li> 
 
      <li> <a href="#about">About</a> </li> 
 
      <li> <a href="#port">Portfolio</a> </li> 
 
      <li> <a href="#contactMe">Contact</a> </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <!-- END NAVIGATION --> 
 
    <!-- Header --> 
 
    <div class="jumbotron" id="jumboHead"> 
 
    <div class="container"> 
 
     <h1></h1> 
 
     <p class="qBio text-center">Michael Adamski. Web Developer. <br> <span class="sub-bio text-center">I am an aspiring Full-Stack Web Developer with a deep interest in creative design, aesthetics and functionality. </span></p> 
 
    </div> 
 
    </div> 
 
    <!-- END HEADER --> 
 

 
    <!-- BODY --> 
 

 

 
    <!-- ABOUT SECTION --> 
 
    <div class="container aboutSection"> 
 
    <h1 class="aboutMe text-center" id="about">About Me:</h1> 
 
    <div class="row text-center"> 
 
     <div class="col-xs-12 col-sm-6"> 
 
     <img class="picMike img-responsive float-right" src="http://s5.postimg.org/e9qc1z12f/10329698_1423434964590736_9047498845267324748_o.jpg"> 
 
     </div> 
 
     <div class="blurbQuote col-xs-12 col-sm-6"> 
 
     <blockquote class="blurb lead text-center visible-lg" id="bio">My name is Michael Adamski and I am currently learning to become a web developer. <br><br> I will be attending Launch Academy in Boston for the Spring 2017 Cohort. <br><br>I look forward to refining my existing skills, acquiring new ones and appling myself to new and interesting projects for prospective clients. <br><br> With an extensive past in both Music and Film I feel that Web Development has all of the components needed for a creative individual like myself to succeed. 
 
     </blockquote> 
 
     <blockquote class="hideMe lead text-center visible-xs visible-sm visible-md">My name is Michael Adamski and I am currently learning to become a web developer. <br><br> I will be attending Launch Academy in Boston for the Spring 2017 Cohort. <br><br>I look forward to refining my existing skills, acquiring new ones and appling myself to new and interesting projects for prospective clients. <br><br> With an extensive past in both Music and Film I feel that Web Development has all of the components needed for a creative individual like myself to succeed. 
 
     </div> 
 
    </div> 
 
    <div> 
 

 

 
      <!-- END ABOUT ME SECTION --> 
 
      <!-- SKILLS ANIMATION --> 
 

 
      <div class="container skillSon"> 
 
      <div class="row"> 
 
       <h2 class="skillsBar text-center">List of Skills:</h2> 
 

 
       <!-- Skill Bars --> 
 

 
       <div class="progress"> 
 
       <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"> 
 
        <span class="skill">HTML <i class="val">90%</i></span> 
 
       </div> 
 
       </div> 
 

 
       <div class="progress skill-bar"> 
 
       <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"> 
 
        <span class="skill">CSS<i class="val">80%</i></span> 
 
       </div> 
 
       </div> 
 

 
       <div class="progress skill-bar"> 
 
       <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"> 
 
        <span class="skill">JavaScript<i class="val">35%</i></span> 
 
       </div> 
 
       </div> 
 

 
       <div class="progress skill-bar"> 
 
       <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"> 
 
        <span class="skill">Photoshop<i class="val">60%</i></span> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <!-- SKILLS END --> 
 

 
    <!-- PORTFOLIO SECTION --> 
 
    <div class="portfolio container" id="port"> 
 
     <div class="row text-center"> 
 
     <h1 class="myPortfolio text-center">Portfolio Showcase</h1> 
 
     <h4 class="sub-head text-center">The following are samples of work down through FreeCodeCamp</h4> 
 
     <ul class="thumbnails"> 
 
      <li class="col-lg-4 col-sm-6 col-xs-12"> 
 
      <div class="thumbnail"> 
 
       <a href="http://codepen.io/mvadamski/full/QKmQAo/"><img class="myWork" src="http://s5.postimg.org/czsimx7af/Screenshot_at_Oct_15_13_16_02.png"></a> 
 
       <div class="caption"> 
 
       <h3 class="port-Text text-center">Tribute Page</h3> 
 
       <p class="port-Text text-center">This is a tribute page I made on CodePen</p> 
 
       <p> 
 
        <a href="#" class="port-Text btn btn-primary"> 
 
        <span class="glyphicon glyphicon-heart 
 
" aria-hidden="true"></span> Like 
 
        </a> 
 
       </p> 
 
       </div> 
 
      </div> 
 
      </li> 
 
      <li class="col-lg-4 col-sm-6 col-xs-12"> 
 
      <div class="thumbnail"> 
 
       <a href="http://codepen.io/mvadamski/full/VKxAyd/"><img class="myWork" src="http://s5.postimg.org/joz22xsmf/Screen_Shot_2016_10_15_at_1_40_47_PM.png" style="width:320px; height: 200px;"></a> 
 
       <div class="caption"> 
 
       <h3 class="port-Text text-center">Personal Website</h3> 
 
       <p class="port-Text text-center"><span class="nowrap">My personal portfolio Website</span></p> 
 
       <p> 
 
        <a href="#" class="btn btn-primary"> 
 
        <span class="port-Text glyphicon glyphicon-heart 
 
" aria-hidden="true"></span> Like 
 
        </a> 
 
       </p> 
 
       </div> 
 
      </div> 
 
      </li> 
 
      <li class="col-lg-4 col-sm-6 col-xs-12"> 
 
      <div class="thumbnail"> 
 
       <img class="placeHolderPic" src="http://s5.postimg.org/u98zlix47/business_q_c_320_200_2.jpg" style="width:320px; height: 200px;"> 
 
       <div class="caption"> 
 
       <h3 class="port-Text text-center">Coming Soon!</h3> 
 
       <p class="port-Text text-center"><span class="nowrap">Stay Tuned...</span></p> 
 
       <p> 
 
        <a href="#" class="btn btn-primary"> 
 
        <span class="port-Text glyphicon glyphicon-heart 
 
" aria-hidden="true"></span> Like 
 
        </a> 
 
       </p> 
 
       </div> 
 
      </div> 
 
      </li> 
 
      <li class="bott col-lg-4 col-sm-6 col-xs-12"> 
 
      <div class="thumbnail"> 
 
       <img class="placeHolderPic" src="http://s5.postimg.org/6fpqgkt9j/200.jpg" style="width:320px; height: 200px;"> 
 
       <div class="caption"> 
 
       <h3 class="port-Text text-center">Coming Soon!</h3> 
 
       <p class="port-Text text-center"><span class="nowrap">Stay Tuned...</span></p> 
 
       <p> 
 
        <a href="#" class="btn btn-primary"> 
 
        <span class="port-Text glyphicon glyphicon-heart 
 
" aria-hidden="true"></span> Like 
 
        </a> 
 
       </p> 
 
       </div> 
 
      </div> 
 
      </li> 
 
      <li class="bott col-lg-4 col-sm-6 col-xs-12"> 
 
      <div class="thumbnail"> 
 
       <img class="placeHolderPic" src="http://s5.postimg.org/54hz83xnr/nightlife_q_c_320_200_4.jpg" style="width:320px; height: 200px;"> 
 
       <div class="caption"> 
 
       <h3 class="port-Text text-center">Coming Soon!</h3> 
 
       <p class="port-Text text-center"><span class="nowrap">Stay Tuned...</span></p> 
 
       <p> 
 
        <a href="#" class="btn btn-primary"> 
 
        <span class="port-Text glyphicon glyphicon-heart 
 
" aria-hidden="true"></span> Like 
 
        </a> 
 
       </p> 
 
       </div> 
 
      </div> 
 
      </li> 
 
      <li class="bott col-lg-4 col-sm-6 col-xs-12"> 
 
      <div class="thumbnail"> 
 
       <img class="placeHolderPic" src="http://s5.postimg.org/uecqv74fb/sports_q_c_320_200_8.jpg" style="width:320px; height: 200px;"> 
 
       <div class="caption"> 
 
       <h3 class="port-Text text-center">Coming Soon!</h3> 
 
       <p class="port-Text text-center"><span class="nowrap">Stay Tuned...</span></p> 
 
       <p> 
 
        <a href="#" class="btn btn-primary"> 
 
        <span class="port-Text glyphicon glyphicon-heart 
 
" aria-hidden="true"></span> Like 
 
        </a> 
 
       </p> 
 
       </div> 
 
      </div> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    <!-- END PORTFOLIO SECTION --> 
 

 
    <div class="breakerOne"></div> 
 

 
    <!-- CONTACT --> 
 

 
    <footer> 
 
     <div class="footHeading"> 
 
     <h1 class="footTitle text-center" id="contactMe"> Contact Me </h1> 
 
     <div class="container"> 
 
      <div class="col-xs-12 socialTags" id="iconPack"> 
 
      <ul> 
 
       <li> 
 
       <a href="https://twitter.com/mvadamski1" target="_blank"> <img class="socialIcons" src="https://cdn3.iconfinder.com/data/icons/peelicons-vol-1/50/Twitter-128.png" alt="Twitter"></a> 
 
       </li> 
 
       <li> 
 
       <a href="https://github.com/MichaelA59" target="_blank"> <img class="socialIcons" src="https://cdn0.iconfinder.com/data/icons/octicons/1024/mark-github-128.png" alt="Git Hub"></a> 
 
       </li> 
 
       <li> 
 
       <a href="https://www.linkedin.com/in/michael-adamski-837bb279" target="_blank"> <img class="socialIcons" src="https://cdn1.iconfinder.com/data/icons/black-socicons/512/linkedin-128.png" alt="Linkedin"></a> 
 
       </li> 
 
       <li> 
 
       <a href="https://www.freecodecamp.com/michaela59" target="_blank"> <img class="socialIcons" src="https://cdn4.iconfinder.com/data/icons/developer-set-3/128/code-128.png" alt="Free Code Camp"></a> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
     </div> 
 
     <div class="breaker"></div> 
 
     <div class="finalText container-fluid"> 
 
      <div class="row"> 
 
      <div class="col-lg-3 col-md-3 col-xs-12"> 
 
       <p class="footText text-center"> Email: <br><a href="mailto:[email protected]"> [email protected]</a></p> 
 
      </div> 
 
      <div class="col-md-4 col-sm-6 col-xs-6"> 
 
       <p class="footText text-center">Currently accepting projects <br> free of charge</p> 
 
      </div> 
 
      <div class="col-md-4 col-sm-4 col-xs-6"> 
 
       <p class="footText text-center">Written & Coded by Michael Adamski </p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
</body>

出典

2016-10-26 vin_Bin87

ボディ上の "max-width：1440px"を除いてボディは自分の画面より小さくなりますが、それはうまく見えます。要素は画面サイズに対応しており、二重列は一列になります。 –

具体的には、2つのセクションがあります。最初は、私のポートレート画像の右にあるバイオです。フルサイズでは、幅の半分を占め、画像は残りの半分を左に取ります。サイズを変更すると、最小サイズで全幅に切り替える前にジャンプし、ソーシャルメディアのアイコンが下部にある場合は4となり、3と1にジャンプしてから2と2に移動し、その後すべて自分の行に移動します... –

あなたが200％にBLOCKQUOTEの幅を設定しているあなたのバイオテキストの問題のために。 100％に設定すると、固定されます：

.hideMe { 
    font-family: 'Exo 2'; 
    font-weight: 300; 
    position: relative; 
    top: -10px; 
    margin: 0 25%; 
    width: 100%; 
}

フッターソーシャルリンクの場合。 ul liを使う代わりに。 ulタグを削除して、各リンクliを、ブートストラップcolクラスを割り当ててdivに変換し、次のように割り当てられたクラスを持つ行コンテナにラップします。

<div class="col-xs-12 col-sm-12 socialTags" id="iconPack"> 
     <div class="row innerContainer"> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
      <a href="https://twitter.com/mvadamski1" target="_blank"> <img class="socialIcons" src="https://cdn3.iconfinder.com/data/icons/peelicons-vol-1/50/Twitter-128.png" alt="Twitter"></a> 
      </div> 
      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
      <a href="https://github.com/MichaelA59" target="_blank"> <img class="socialIcons" src="https://cdn0.iconfinder.com/data/icons/octicons/1024/mark-github-128.png" alt="Git Hub"></a> 
      </div> 
      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
      <a href="https://www.linkedin.com/in/michael-adamski-837bb279" target="_blank"> <img class="socialIcons" src="https://cdn1.iconfinder.com/data/icons/black-socicons/512/linkedin-128.png" alt="Linkedin"></a> 
      </div> 
      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 
      <a href="https://www.freecodecamp.com/michaela59" target="_blank"> <img class="socialIcons" src="https://cdn4.iconfinder.com/data/icons/developer-set-3/128/code-128.png" alt="Free Code Camp"></a> 
      </div> 
     </div> 
     </div>

と、次のようにフッターULおよびフッターのliクラスの名前を変更します。

.socialTags .innerContainer { 
    margin-left: 60px; 
    padding-bottom: 50px; 
} 

.socialTags .innerContainer div { 
    display: inline-block; 
    padding: 75px 50px 0px 50px; 
}

・ホープ、このことができます。

出典

2016-10-26 16:47:26

私は家に帰ると、今夜それを試してみるよ。 –

サイズ変更時に要素が移動する（テキスト/画像）

答えて

関連する問題