Need help for Banner in mobile Portrait View

[gary4u]

Hi,

I Need help for Banner in mobile Portrait View-Issue here is that the banner works fine on the desktop and mobile landscape But in mobile PORTRAIT it does not. it shows just the center of the banner.Need to view the banner as it looks like in the desktop and mobile landscape.

HTML-

<

section class=”section-slide”>

<

div class=”wrap-slick1″>

<

div class=”slick1″>
<div class="item-slick1" style="background-image: url()”>

<

div class=”container h-full”>

<

div class=”flex-col-l-m h-full p-t-100 p-b-30 respon5″>

<

div class=”layer-slick1 animated visible-false” data-appear=”fadeInDown” data-delay=”0″>

                        </span>
                    &lt;/div

CSS
[ Slick1 ]*/
.wrap-slick1 {
position: relative;
}
.item-slick1 {
height: calc(100vh – 40px);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}

.rs1-slick1 .item-slick1 {
height: calc(100vh – 84px);
}
.rs2-slick1 .item-slick1 {
height: 100vh;
}
@media (max-width: 991px) {
.item-slick1 {
height: calc(100vh – 70px) !important;
}
}

.arrow-slick1 {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
width: auto;
height: auto;
font-size: 80px;
color: rgba(0,0,0,0.3);
position: absolute;
opacity: 0;

top: 50%;

-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);

z-index: 200;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}
.wrap-slick1:hover .arrow-slick1 {
 opacity: 1;
}

.arrow-slick1:hover {
color: #7280e0;
}

.next-slick1 {
right: 50px;
left: auto;
}

.prev-slick1 {
left: 50px;
right: auto;
}

@media (max-width: 991px) {
.next-slick1 {
right: 15px;
}

.prev-slick1 {
left: 15px;
}
}

Can any one please help in this regard.

Gary

[yoyo]

Hi Gary

Please create a codepen for your banner. So we can understand and help for you.

[gary4u]

Hi,

Here I am using PHP in the HTML page to display the sliding 3 banners.

I have done as requested and dont know if I have inserted the codes right way please take a look and let me know.

https://codepen.io/gary4u/pen/wbwMVR

Gary

[Author]

Posts