0
イメージの上にマウスを置くと、テキストブロックに置き換えられます。フォントの反応性を修正する
ブラウザを縮小すると、フォントを応答性にする必要のあるEMで指定したにもかかわらず、フォントサイズが変わらないことがわかります。
ホバー要素のレイアウトはモバイルビューで同じにする必要があります。つまり、ブラウザのサイズを縮小すると表示されるスクロールバーを避ける必要があります。どのようにこれを達成するための任意のアイデアですか？
/*Programs*/
ul.img-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
ul.img-list li {
display: inline-block;
width: 100%;
height: 100%;
margin: 0;
position: relative;
}
div.text-content {
background: rgba(26,33,43,0.9);
color: white;
cursor: pointer;
left: 0;
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
opacity: 0;
font-size: 1.250em;
font-family: Roboto;
line-height: 1em;
font-weight: 300;
text-align: center;
overflow-y: auto;
box-sizing: border-box;
padding-right: 25px;
padding-left: 25px;
padding-top: 25px;
padding-bottom: 25px;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
text-align: center;
vertical-align: middle;
}
ul.img-list li:hover div.text-content {
opacity: 1;
}
/* Events page */
/*Event link button*/
.btn {
background-color: transparent;
border-radius: 42px;
border: 2px solid #ffffff;
display: inline-block;
cursor: pointer;
font-family: Roboto;
line-height: 1.750em;
font-size: 1.500em;
padding: 5px 15px 5px 15px;
margin-right: 45px;
margin-left: 45px;
}
.btn:link {
color: #ffffff;
text-decoration: none;
}
.btn:visited {
color: #1b1c16;
text-decoration: none;
}
.btn:hover {
background-color: #ffffff;
color: #1b1c16 !important;
}
.btn:active {
position: relative;
\t top: 1px;
}
/*All events button*/
.evens_btn {
background: ;
}
.events_btn>span{
color: #f9c70f;
font-family: Roboto;
color: #ffffff;
font-size: 1.5em !important;
background: ;
text-decoration: none !important;
padding: 10px 0px 10px 0px;
}
.events_btn>i{
color: #ffffff;
margin-right: 15px;
font-size: 3.125em;
}
.events_btn:link>i {
color: #f9c70f;
}
.events_btn:visited>i {
color: #ffffff;
text-decoration: none;
}
.events_btn:hover>i {
color: #f9c70f;
}
.events_btn:active>i {
color: #f9c70f;
}
.events_btn:link>span {
color: #f9c70f;
}
.events_btn:visited>span {
color: #ffffff;
text-decoration: none;
}
.events_btn:hover>span {
color: #f9c70f ;
}
.events_btn:active>span {
color: #f9c70f;
}<ul class="img-list">
<li><img style="width: 100%; height: 100%;" src="http://www.sflsupport.org/wp-content/uploads/2016/06/Programs-11.jpg" />
<div class="text-content">
<div>
<h5 style="color: white; font-size: 2.375em; font-family: Montserrat; font-weight: 600; line-height: 1em; letter-spacing: 0.125em;">WEBINAR<br/>ARCHIVE</h5>
<hr style="border-top: 0.125em solid #ffffff; width: auto; margin: 0.625em 1.875em;"/>Throughout the years SFL has ammased the library of recorded webinars from some of the leading libertarian voices about numerous topics in philosophy, politics, and economics. How can the government fix the higher education bubble? What is Ayn Rand's theory of natural rights? Tune in to our videos for answers to these questions and many more.
<br>
<a class="btn" style="color: white; text-align: center; margin-top: 0.625em; padding-top: 0.313em; padding-bottom: 0.313em; padding-left: 1.875em; padding-right: 1.875em; text-decoration: none; font-size: 1.500em; font-weight: 600; border: 3px solid white; letter-spacing: 0.125em;" href="http://www.google.com/" target="_blank">READ MORE</a>
</div>
</div>
</li>
</ul>
の代わりに
vwにフォントサイズを設定することができます* EM *だけではありませんあなたの次元を設定し、反応するでしょう...とにかくあなたはtを定義する必要があります彼はブレークポイント – DaniP