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
    RobertRobert
    Participant
    • Topics: 43
    • Replies: 59
    • Total: 102
    Member since: August 1, 2016

    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.

    #167255
    Sonl SinhaSonl Sinha
    Moderator
    • Topics: 0
    • Replies: 30975
    • Total: 30975
    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
    RobertRobert
    Participant
    • Topics: 43
    • Replies: 59
    • Total: 102
    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
    Sonl SinhaSonl Sinha
    Moderator
    • Topics: 0
    • Replies: 30975
    • Total: 30975
    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
    RobertRobert
    Participant
    • Topics: 43
    • Replies: 59
    • Total: 102
    Member since: August 1, 2016

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

    #169985
    Sonl SinhaSonl Sinha
    Moderator
    • Topics: 0
    • Replies: 30975
    • Total: 30975
    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
    RobertRobert
    Participant
    • Topics: 43
    • Replies: 59
    • Total: 102
    Member since: August 1, 2016

    ipad view

    https://ibb.co/NjJF4RZ

    #170122
    Sonl SinhaSonl Sinha
    Moderator
    • Topics: 0
    • Replies: 30975
    • Total: 30975
    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.