I can not apply the styles to a article in the mediaquery of tablet landscape. It takes me the mediaquery styles of desktop resolution. With my tablet horizontally, the paragraph is almost down, the arrow icon is not visible. In portrait it looks good on the tablet. On desktop it looks good too. I have modified the code many times and I can not solve it.
@media (min-width: 767px) and (orientation : portrait){
#shufle {
line-height: normal;
margin-left: auto;
margin-right: auto;
//top: 35%;
}
#shufle .read-on
{
margin-top:100px;
padding-bottom:800px;
}
#shufle p
{
margin-top: 500px;
text-align: center;
font-weight: 300;
font-size: 30px;
}
}
@media screen and (min-width : 767px) and (max-width : 840px) and (orientation : landscape){
#shufle p
{
margin-top: 200px;
text-align: center;
font-weight: 300;
font-size: 30px;
}
#shufle .read-on
{
margin-top:350px;
padding-bottom:300px;
}
}
@media (min-width: 992px) {
#shufle p
{
margin-top: 450px;
font-size: 30px;
text-align: center;
}
#shufle .read-on
{
margin-top: 300px;
padding-bottom:80px;
}
} <article id="shufle">
<div class="container">
<p class="fading-texts text-center">
lorem impsum lomrem.
</p>
<p class="read-on">
<a href="#about" class="goto">
<span class="goDown">
<i class="fa fa-chevron-down fa-cog-white"></i>
</span>
<span class="htxt">Read on </span>
</a>
</p>
</div>
</article>