Used device screen size to decide some feature on the theme.

Hi there,

Hope you have a nice day.

My theme has a feature that can active fullscreen rows and disables it on mobile.

Now, I have an issue that when I enable "Active Fullscreen Rows", and I also enable "Disable On Mobile" at the same time, the horizontal mode of IPad will have a problem that will be categorized to a desktop device, so it will be broke. (note: My desktop is different with the mobile version, it's used visual composer's response options.)

I want to ask that can I use screen size to decide "Active Fullscreen Row" and "Disable On Mobile" options enable or not and? or some other way that can achieve my requested.

website: http://mobilegame.oops.com.tw/

  • Rupok

    Hi leoventans,

    So sorry to hear the inconvenience you are having. I think this will be possible with advanced jQuery code, but that will be complex. Instead, I'm hoping to get an easier solution without custom coding.

    To find out how to fix this, I need to be clear about the issue. But I'm afraid, I'm not exactly sure how to see this issue live. I checked your site in iPad responsive view in Desktop Chrome, but the site is looking fine. Can you please specify how we can see the issue live? If you could provide a screenshot, that would be great.

    Moreover, as Visual Composer is a third party paid plugin, I don't have much idea on their options and architecture. Can you please ping the developer of this plugin and ask how you can disable on tablets too? Please let us know what they say about this. If there is anything we can do from our end, we will be glad to do that.

    I'm looking forward to hearing from you and resolving this issue as soon as possible.

    Have a nice day. Cheers!
    Rupok

  • leoventans

    Hi there,

    I have contact the author but haven't got a response, so can you help me take a look first?

    In the horizontal mode of IPad without Full page scroll, there is some problem.

    "Active Fullscreen Row" On & disable on mobile:

    http://imgur.com/a/7ReWO

    "Active Fullscreen Row" Off & disable on mobile:

    http://imgur.com/a/ddHH8

    When I turn on "Active Fullscreen Row" there are spacing between the section, otherwise, the spacing was disappeared.

    I can't find it on the desktop browser.

    http://mobilegame.oops.com.tw/ (It has access.)

    I want to achieve that when the Active Fullscreen Row is On & disable on mobile, I don't want have a white blank, how can I do?

    Thank you.

    Best regards,

  • Rupok

    Hi leoventans,

    Thanks for the screenshots. It helps us to understand the issue better.

    I inspected your site elements and probably found a fix. Can you please try the following custom CSS Code?

    @media only screen and (max-device-width: 2600px) and (min-device-width: 481px) {
    	.using-mobile-browser #nectar_fullscreen_rows[data-mobile-disable="on"] > div:not(.full-width-content) .full-page-inner-wrap-outer > .full-page-inner-wrap > .full-page-inner > .container {
    	    padding-top: 0% !important;
    	    padding-bottom: 0% !important;
    	}
    }

    You can add this to a theme's stylesheet, in a child theme, or using a plugin like My Custom CSS.

    This should remove that white blank space. Please let us know if this doesn't work. We will be glad to help further.

    Have a nice day. Cheers!
    Rupok

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.