次のCSSを適用しました:
@media screen and (max-height: 650px) {
.about .info{
bottom: 65px;
}
}
私のhtmlに書いた
<meta name="viewport" content="width=device-width, initial-scale=1.0">
しかし、ブレークポイントは機能していません。以下を追加しました:
<meta name="viewport" content="height=device-height, initial-scale=1.0">
それも機能しなかったため、
"initial-scale=1.0"を削除しましたが、Webページ全体が混乱します。
何かご意見は？
更新
これが画像と情報を追加する私のforeachループです。
<?php $i=0;?>
@foreach($images as $image)
<div class="about">
<div class="overlay"></div>
<div class="image" style="background-image:url({{asset('uploads/about/' . $image->path )}})">
<section class="info right hidden" id="{{$i+1}}">
<h2>{{$image->title}}</h2>
<div>{{$image->body}}</div>
</section>
</div>
</div>
<?php $i++; ?>
@endforeach
そしてこれが私の完全な
<head>です
<!DOCTYPE html>
<html>
<head>
<title>Kristal Logistics</title>
<link rel="icon" type="image/png" href="{{asset('img/favicon.png')}}" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{{ HTML::style('fonts/fonts.css')}}
{{ HTML::style('css/reset.css')}}
{{ HTML::style('css/fullpage.css')}}
{{ HTML::style('css/animate.css')}}
{{ HTML::style('css/menu.css')}}
{{ HTML::style('css/main.css')}}
{{ HTML::script('js/jquery.js') }}
{{ HTML::script('js/script.js') }}
{{ HTML::script("js/modernizr.custom.js")}}
</head>
<body>
上記の私のcssコードは、main.cssの最後の行に適用されています。