ウィンドウのサイズ変更時にテキストが非表示になる

提供されているテンプレートに基づいてクラスのWebサイトを構築していますが、ウィンドウのサイズが変更されるとテキストが移動するようにしていますテキストと関連するボタンを隠す）。ウィンドウのサイズ変更時にテキストが非表示になる

理想的には、ウィンドウがリサイズされるときに、フォーカスがテキスト/ボタンに、そして拡張子は画像の右下隅に残るように、ページを固定することが理想的です。ここ

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

     <meta name="viewport" content="width=device-width, inital-scale=1.0"> 
<!-- This tells mobile devices not to zoom out the page, start with scale=1 --> 
     <link rel="stylesheet", type="text/css", href="Vendors/css/normalize.css"> 
     <link rel="stylesheet", type="text/css", href="Vendors/css/grid.css"> 
     <link rel="stylesheet", type="text/css", href="Vendors/css/ionicons.min.css"> 
     <link rel="stylesheet", type="text/css", href="Resources/css/style.css"> 
     <link rel="stylesheet", type="text/css", href="Resources/css/queries.css"> 
     <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel='stylesheet' type='text/css'> 

     <title>Whitetail Acres Tree Farm</title> 
    </head> 
    <body> 
     <header> 
      <nav> 
       <div class="row"> 
        <img src="Resources/img/logo-white.png" alt="Omnifood logo" class="logo"> 
        <ul class="main-nav"> 
         <li><a href="#features">Food Delivery</a></li> 
         <li><a href="#meals">How it Works</a></li> 
         <li><a href="#steps">Our Cities</a></li> 
         <li><a href="#cities">Sign up</a></li> 
        </ul> 
        <a class="mobile-nav-icon js--nav-icon"><i class="ion-navicon-round"></i></a> 
       </div> 
      </nav> 
      <div class="hero-text-box"> 
       <h1>Schedule <br> Your Visit!</h1>  
       <a class="btn btn-full js--scroll-to-plans" href="#">I'm hungry</a> 
       <a class="btn btn-ghost js--scroll-to-start" href="#">Show me more</a> 
      </div> 
     </header>

そして、私のCSSは次のとおりです：あなたが行のために幅を定義したhaventよう

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

html 
{ 
    background-color: #ffffff; 
    color: #555; 
    font-family: 'Lato', 'Arial', sans-serif; 
    font-size: 20px; 
    font-weight: 300; 
    text-rendering: optimizeLegibility; 
} 

.clearfix {zoom: 1} 
.clearfix:after { 
    content: '.'; 
    clear: both; 
    display: block; 
    height: 0; 
    visibility: hidden; 
} 

header{ 
    background-image: url(img/hero.jpg); 
    background-size: cover; 
    background-position:bottom, right; 
    height: 100vh; 
    background-attachment:inherit; 
} 

.hero-text-box{ 
    position: absolute; 
    width:1080px; 
    top:80%; 
    left:55%; 
    text-align: right; 
    transform: translate(-50%, -50%); 
} 

.row{ 
    max-width: 1140px; 
    margin:0 auto; 
} 

section{ 
    padding: 80px 0; 
} 

.box{ 

    padding: 1%;

出典

2017-11-13 J Pop

が見える

は、ここに私のHTMLです。私は、ブートストラップを使用するのが大好きなWebアプリケーションを実行すると

.row{ 
max-width: 1140px; 
width: 100%; 
margin:0 auto; 
}

出典

2017-11-13 20:08:55

：のようなものを試してみてください。それは、私が必要とするものをどんな画面サイズでも実現する、反応的なフロントエンドを作成するのに役立つcssクラスの束を私に提供します。短い話ですが、私はメディアクエリ、ブートストラップレイアウトグリッド、またはその両方の組み合わせを使用します。

YouTubeには多くのチュートリアルがあります。この男は、ブートストラップレイアウトグリッドの基本がどのように機能するかを示しています。 https://youtu.be/GDwWmrpCa30

メディアクエリーは、現在のデバイスの画面サイズに基づいて異なる操作を行う必要がある場合に便利です。これはブートストラップを必要とせずに使用することができますが、本当に応答性の高いアプリケーションを作成するためにブートストラップと共に使用することもできます。それについてもyoutubeには数多くのチュートリアルがありますが、ここではチェックアウトするのが良い方法です。

メディアクエリ例https://youtu.be/2KL-z9A56SQ：

@media only screen 
and (*Your threshold criteria goes here* EXAMPLE: max-width : 1000px) { 
    //css goes here with whatever css you want to fire at this threshold 
}

は、私はさらに支援のものとすることができるなら、私に教えてください。がんばろう。

出典

2017-11-13 20:10:28

完全に配置された要素に正確な幅を設定する場合は、ブラウザのサイズに関係なく、その幅にとどまることが予想されます。

.hero-text-box{ 
 
    position: absolute; 
 
    top:80%; 
 
    left: 49%; 
 
    text-align: right; 
 
    transform: translate(-50%, -50%); 
 
    max-width: 1080px; 
 
    width: 100%; 
 
}

また、左側の値があるため、画面にそれを移動させる変換ルールの50％未満であるべきです。

出典

2017-11-13 20:16:11 pjones235

ウィンドウのサイズ変更時にテキストが非表示になる

答えて

関連する問題