SKT Ele Book Mobile Issues

Home Forums All Other Themes SKT Ele Book Mobile Issues

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #167181
    Robert
    Participant
    • Topics: 37
    • Replies: 53
    • Total: 90
    Member since: August 1, 2016

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

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

    IMG-7114

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

    IMG-7115

    Thank you.

    #167255
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25878
    • Total: 25878
    Member since: August 16, 2013

    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

    #167273
    Robert
    Participant
    • Topics: 37
    • Replies: 53
    • Total: 90
    Member since: August 1, 2016

    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.

    #167337
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25878
    • Total: 25878
    Member since: August 16, 2013

    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

    #169944
    Robert
    Participant
    • Topics: 37
    • Replies: 53
    • Total: 90
    Member since: August 1, 2016

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

    #169985
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25878
    • Total: 25878
    Member since: August 16, 2013

    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

    #170031
    Robert
    Participant
    • Topics: 37
    • Replies: 53
    • Total: 90
    Member since: August 1, 2016

    ipad view

    IMG-0008

    #170122
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25878
    • Total: 25878
    Member since: August 16, 2013

    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

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.