SKT Ele Book Mobile Issues

[Robert]

Hello, this is the site: www.markofthefaerie.com

Is there anyway to add the book cover and button that’s on desktop homepage to the phone mobile view?

https://ibb.co/DQY2dxH

Also, how can I move the book cover to the left on the ipad / tablet view?

https://ibb.co/7XYchM9

Thank you.

[Sonnal S Sinha]

Hi,

Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

@media screen and (max-width:767px){
.slider-main .slide-overlay-image { display:block !important;}
.slider-main .nivo-caption { left:50% !important; width:50% !important;}
.nivo-caption .title { font-size:20px !important;}
.nivo-caption .nivo-caption-content { line-height:20px !important;}
}

@media screen and (min-width:1024px) and (max-width:1160px) {
.slider-main .slide-overlay-image { left:50px; max-width: 38%;}
}

Regards,
Dave

[Robert]

Hello, thank you..

For the tablet view the book cover is now covering “buying options”

and for the mobile phone view the full text isn’t there nor is the yellow button that’s on desktop. “read full description” button is what I’m referring to.

[Sonnal S Sinha]

Hi,

Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

@media screen and (max-width:479px) {
.nivoSlider img { max-width: 160% !important; width: 160% !important; margin-left: -60%;}
.slider-main .nivo-caption { left: 37% !important; width: 65% !important;}
.nivo-caption .title { font-size:17px !important;}
.slider-main .nivo-caption .slidebtn { display:block;}
.slider-main .nivo-caption { top:0 !important;}
.slider-main .nivo-caption .slidebtn a { padding:12px 25px;}
.slider-main .nivo-caption .slidedesc { margin-top:5px; line-height:18px;}
}

@media screen and (min-width:480px) and (max-width:767px) {
.slider-main .slide-overlay-image { max-width:40% !important;}
.slider-main .nivo-caption .slidedesc { margin:10px 0 !important;}
.slider-main .nivo-caption .slidebtn { margin-top:5px;}
}

@media screen and (min-width:768px) and (max-width:1023px) {
.slider-main .slide-overlay-image { max-width:40% !important;}
.slider-main .nivo-caption .title { font-size:29px;}
.slider-main .nivo-caption .slidedesc { line-height:20px;}
.nivoSlider img { max-width: 130% !important; width: 130% !important; margin-left: -30%;}
}

Regards,
Dave

[Robert]

Can you please look at these on mobile and tablet view? It’s not correct.

[Sonnal S Sinha]

Hi,

Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

@media screen and (max-width:479px) {
.slider-main .slide-overlay-image { left:10px !important;}
}

Regards,
Dave

[Robert]

ipad view

https://ibb.co/NjJF4RZ

[Sonnal S Sinha]

Hi,

Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

@media screen and (min-width:1161px) and (max-width:1400px) {
.slider-main .slide-overlay-image {
    top: 0;
    left: 50px;
}
}

Regards,
Dave

[Author]

Posts