IPad Turned Landscape

Home Forums All Other Themes IPad Turned Landscape

Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #48866
    Kyle
    Member
    • Topics: 1
    • Replies: 3
    • Total: 4
    Member since: September 22, 2016

    I bought the paid version but am still using the free version for the time being.

    On IPads, users that have the screen turned landscape, have all of the text and images touching the edge of the screens.

    Even the demo theme does it. The far left touches the edge of the screen and the far right touches the far right of the screen.

    The IPhone turned landscape, Safari on a Mac, Chrome, and even the IPad in portrait mode seem to work fine; but not the IPad when turned to landscape.

    Any ideas? Thanks!

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

    Hi Kyle,

    Kindly show us your website URL.

    Regards,
    Brad

    #49086
    Kyle
    Member
    • Topics: 1
    • Replies: 3
    • Total: 4
    Member since: September 22, 2016

    My home page is http://radiantlandscapelighting.com/

    You can see examples of the text on the IPad touching the very edges when turned landscape by going to these pages on my site:

    About Us

    Contact Us

    And on the theme sample site:
    https://wp-themes.com/skt-white/ and then click on the sub pages

    Thanks!
    Kyle

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

    Hi Kyle,

    Kindly go to Appearance>>Theme Option>>Basic Setting>>Custom CSS Box

    Add this code there:

    @media screen and (min-width:1024px) and (max-width:1169px){
    .content-area {padding: 50px 20px; width:100%; box-sizing:border-box;}
    }

    Regards,
    Brad

    #53733
    Kyle
    Member
    • Topics: 1
    • Replies: 3
    • Total: 4
    Member since: September 22, 2016

    Hi Brad,

    Thank you very much for this info. I’ve been so busy that I just now am attempting to put in the code.

    I did pay for the Pro Version, but I haven’t had time to transition my free version to the pro version. When going to Appearance->Theme Options->Basic Settings, I don’t see a spot for “Custom CSS Box”. Perhaps this is because I’m still utilizing the free version?

    Is there a way to implement this change while I’m still on the free version, until I can convert to my paid version? Like I said, I have paid for the full version.

    Thanks!

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

    Hi Kyle,

    Kindly refer to this link: https://www.sktthemes.org/forums/topic/upgrade-from-free-to-pro-version/

    Regards,
    Brad

    #53739
    Kyle
    Member
    • Topics: 1
    • Replies: 3
    • Total: 4
    Member since: September 22, 2016

    Hi Brad,

    Thanks for the link. Does that means I need to use the pro version before I can fix the iPad issue?

    It’s my understanding that only the home page settings need updating, not the entire website, however, it appears that there are a ton of changes to make in order for the home page to match what it was in the free version. Unfortunately I don’t have time right now to get it to match.

    Perhaps I’m wrong, and am making it too difficult?

    Thanks!

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

    Hi Kyle,

    If you don’t want to use PRO version then kindly go to Appearance>>Editor>>Style.css

    and paste the code on the bottom of the file.

    @media screen and (min-width:1024px) and (max-width:1169px){
    .content-area {padding: 50px 20px; width:100%; box-sizing:border-box;}
    }

    Regards,
    Brad

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

    Also add this code on the bottom of the style.css

    Add this code there:

    @media screen and (min-width:768px) and (max-width:1023px) {
    #some-facts li { vertical-align:top;}
    #some-facts li h2 { font-size:16px; padding:30px 0 10px;}
    #some-facts li h5 { font-size:14px;}
    .our-projects img { width:23.70%;}
    }

    @media screen and (min-width:1024px) and (max-width:1169px) {
    #some-facts li { vertical-align:top;}
    #some-facts li h2 { font-size:20px; padding:40px 0 10px;}
    #some-facts li h5 { font-size:14px;}
    .our-projects img { width:23.70%;}
    }

    Regards,
    Brad

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