Home › Forums › All Other Themes › SKT Ele Book Mobile Issues
- This topic has 8 replies, 2 voices, and was last updated 3 years, 11 months ago by Sonl Sinha.
-
AuthorPosts
-
October 19, 2020 at 12:57 pm #167181
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.
October 19, 2020 at 1:12 pm #167255Hi,
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,
DaveOctober 19, 2020 at 5:56 pm #167273Hello, 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.
October 20, 2020 at 12:38 pm #167337Hi,
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,
DaveDecember 1, 2020 at 7:13 pm #169944Can you please look at these on mobile and tablet view? It’s not correct.
December 2, 2020 at 12:22 pm #169985Hi,
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,
DaveDecember 2, 2020 at 4:55 pm #170031ipad view
https://ibb.co/NjJF4RZ
December 4, 2020 at 11:51 am #170122Hi,
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 -
AuthorPosts
- You must be logged in to reply to this topic.