Website not working on iPad

Home › Forums › Gillion Theme › Website not working on iPad

Home › Forums › Gillion Theme › Website not working on iPad

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    RESOLVED Posts

  • SarahS
    Participant

    For some reason my website doesn’t seem to be working on iPad at all! But seems to be working on iPhone absolutely fine (see screengrabs to see comparison on iPad & iPhone – iPad view is completely blank with just the logo & menu & footer showing). I haven’t touched anything to do with mobile settings/mobile CSS. Is there any reason why none of the content is showing?

    And why is the iPad landscape menu button making no difference at all?

     

    Thanks in advance!

     

    URL is – blog.lightful.com

    Attachments:
    You must be logged in to view attached files.

    SarahS
    Participant

    Forgot to mention – my iPad has been updated to the latest iOS – but it wasn’t working before the update or after.

    Shufflehound Support
    Moderator

    Hi @SarahS,

     

    Sorry to hear of the problem you are having.

     

    I can see you are using older version of theme on your site so please update it to the below latest version.

     


    Please login to access this file

    Are you facing the same issue on your iPad with our demo site here https://gillion.shufflehound.com/ ?

     

    Please also test it using different browser on your iPad.

     

    Best regards,
    Shufflehound team

    SarahS
    Participant

    Your demo theme seems to be working absolutely fine on my iPad. I’ll install 1.2.2 & see what happens then & then I’ll start deactivating plugins etc. I cannot think what I may have done to stop it from working!

    SarahS
    Participant

    Ok, I’ve been through lots of options & I’m afraid to say it isn’t working still. And also the Masonry style blogs on your demo site are also not working on the iPad either (eg. the blog posts on the Clean & Card Style demos are showing up blank – I’ve attached a picture to show you what I’m seeing on the Clean demo).

    Basically I have –

    • Installed 1.2.2 (still no change on iPad)
    • Installed the demo (still no change on iPad)
    • Deactivated all plugins (still no change on iPad)
    • Deleted out all of my custom CSS (still no change on iPad)
    • Tried both Chrome & Safari on iPad

    The blog posts are still showing up blank no matter what I do! I’ve tried to change the style of blog (from Masonry to Grid etc) & it doesn’t seem to make any difference at all to the page view on Desktop or show up the posts on iPad.

    Feeling like I’m banging my head against a wall! Really need to get this blog working on iPad, otherwise I will need to purchase another theme & start again!

    Strangely though it works perfectly on iPhone!

    Attachments:
    You must be logged in to view attached files.

    SarahS
    Participant

    I’ve managed to get the website working on the iPad, but only by assigning a static page (with Blog template) as the front page & making the blog layout Grid – this makes the posts show up on the iPad. Which is a shame as I liked the Masonry layout.

    However now I have an issue with the nav menu overlapping the blog posts & not appearing until you scroll down the page slightly. Is there any CSS to correct this? (adding more padding to the top of the Grid blog layout?)

    http://blog.lightful.com/

    Thanks in advance!

    Shufflehound Support
    Moderator

    Solution for this topic

    However now I have an issue with the nav menu overlapping the blog posts & not appearing until you scroll down the page slightly. Is there any CSS to correct this? (adding more padding to the top of the Grid blog layout?)

    You can resolve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.

     

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    body.home #wrapper {
        padding-top: 40px;
}
@media (max-width: 767px){
body.home #wrapper {
    padding-top: 74px;
}
}
.home .primary-desktop-light .sh-header:not(.sh-sticky-header-active) .sh-nav > li:not(.current_page_item):hover > a,
.home .primary-desktop-light .sh-header:not(.sh-sticky-header-active) .sh-nav > li > a {
    color: rgba(143,100,254,1) !important;
}

.home  .primary-desktop-light .sh-header {
    background-color: rgba(255,255,255,1)!important;
    box-shadow: 0 6px 7px -3px #eef3ff;
}

    SarahS
    Participant

    This is looking much better now, thanks! And thanks for the extra code to create the box-shadow underneath the menu, you are a star!

     

    It does appear that the current page item (Blog) is showing up as white or transparent though until you scroll down a little & then it shows up & becomes purple. Is there anyway of adapting the code above to make sure the current page item is purple before the sticky header kicks in when you scroll? Thanks!

    Shufflehound Support
    Moderator

    Solution for this topic

    To do that we have to make above CSS code more specific as displayed below.

     

    body.home #wrapper {
        padding-top: 40px;
}
@media (max-width: 767px){
body.home #wrapper {
    padding-top: 74px;
}
}
.home #page-container .primary-desktop-light .sh-header:not(.sh-sticky-header-active) .sh-nav > li:not(.current_page_item):hover > a,
.home #page-container .primary-desktop-light .sh-header:not(.sh-sticky-header-active) .sh-nav > li > a {
    color: rgba(143,100,254,1) !important;
}

.home  .primary-desktop-light .sh-header {
    background-color: rgba(255,255,255,1)!important;
    box-shadow: 0 6px 7px -3px #eef3ff;
}

    SarahS
    Participant

    Thank you! That is working perfectly now.

    Shufflehound Support
    Moderator

    You are most welcome here 🙂

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)