Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #240618

    Hi
    I am still trying to get my settings right for swapping a color section with video background with an image slider on mobile & ipad. I got it working with your code for the mobile:
    @media only screen and (min-width: 767px) {
    .page-id-7727 #full_slider_1 { display: none; }}
    @media only screen and (max-width: 767px) {
    .page-id-7727 #av_section_1 { display: none; }}

    but need to set it to swap on the ipad. I tried to replace it with this:

    @media only screen and (min-width: 1140) {
    .page-id-7727 #full_slider_1 { display: none; }}
    @media only screen and (max-width: 1140px) {
    .page-id-7727 #av_section_1 { display: none; }}

    but then I see both the color section & image slide on the computer.
    Can you help me with this? Thanks!
    n

    • This topic was modified 7 years, 11 months ago by Yigit.
    #240815

    Hey Munford!

    Please add

    @media only screen and (min-width: 768px) {
    .page-id-7727 #full_slider_1 { display: none!important; }}

    Best regards,
    Yigit

    #241066

    Thanks Yigit –
    do I add that to this code?

    @media only screen and (min-width: 1140) {
    .page-id-7727 #full_slider_1 { display: none; }}
    @media only screen and (max-width: 1140px) {
    .page-id-7727 #av_section_1 { display: none; }}

    n

    #241152

    Hey!

    I’m a bit confused N. You would like to remove slider on screens wider than 768px, is that correct? If so, you can just add the code i posted to remove the slider on that certain page

    Cheers!
    Yigit

    #241229

    What I need to do is hide the color section on iphone/ipad and
    hide the slider on computer screens. The first code you gave me worked
    for the mobile but not for ipads – the ipad will not automatically play
    the video on the color section, so I want to also show the slider there
    and hide the video. thanks so much!
    n

    #242085

    Hi!

    Please adjust the code i posted to following one

    @media only screen and (min-width: 1024px) {
    .page-id-7727 #full_slider_1 { display: none!important; }
    .page-id-7727 #av_section_1 { display: block !important; }}

    Best regards,
    Yigit

    #242197

    If I only use that code, it’s right on the computer, shows both slider and
    video on mobile and tries to load video on ipad then goes blank.

    if I use:
    @media only screen and (min-width: 1024px) {
    .page-id-7727 #full_slider_1 { display: none!important; }}
    @media only screen and (min-width: 1024px) {
    .page-id-7727 #av_section_1 { display: block !important; }}

    @media only screen and (min-width: 767px) {
    .page-id-7727 #full_slider_1 { display: none; }}
    @media only screen and (max-width: 767px) {
    .page-id-7727 #av_section_1 { display: none; }}

    then it is right on mobile and computer but still video load then blank on the ipad.
    how can I fix this? or is there a way to get the video to play on the ipad?
    thanks very much
    n

    • This reply was modified 9 years, 12 months ago by Munford.
    #242311

    Hi!

    It does work fine on my end right now when i resize the browser window, have you tried flushing browser cache after applying the code?

    Regards,
    Yigit

    #242404

    does it work for you on the ipad? I am still seeing the video trying to load and then a black page.

    • This reply was modified 9 years, 12 months ago by Munford.
    #244123

    Hey!

    Unfortunately i do not have a chance to check your website on an actual ipad but when i resize the window it works fine. Please try updating the theme to the latest version

    Cheers!
    Yigit

    #244244

    I updated to the latest version and had many errors, resizing of my logo in the header lead to all my custom css not showing. I am not ready to redo my site just yet. When I go to that page on the ipad it is still trying to load the video. Is the last code right?
    \thanks
    n

    #244347

    Hey!

    Thank you for using the theme! Please try this one:

    @media all and (min-width: 768px)  and (max-width: 1024px) {
    .page-id-7727 #full_slider_1 { display: none!important; }
    .page-id-7727 #av_section_1 { display: block !important; }}

    The media query above is usually use to target tablet devices portrait and landscape mode.

    Cheers!
    Ismael

    #245878

    Hi again,
    That did not work, unfortunately. see – the slider is not being hidden there, and on the mobile it’s now also showing both video (not loading) and the slider. Any other suggestions? I know this can be done!
    best
    N

    • This reply was modified 7 years, 11 months ago by Yigit.
    #246269

    Hi!

    Looking at the site now the media query is working fine on my end. You can adjust the top end of the query (1024) to a larger screen size so that you don’t get users above 1024 who are seeing both items which is the only issue I see.

    If you need more in depth customization help you will need to look into a freelance developer from somewhere like Microlancer, Codeable or http://kriesi.at/contact/customization . Generally support isn’t able to assist with individual site customization.

    Cheers!
    Devin

    #246424

    Hi Devin,
    When you say that the media query is working fine does that mean you see something different than I am?
    I still see both video and slider on the computer. I understand you do not do customization on sites – thought this
    was an easy one. Almost had it with this code:

    @media only screen and (min-width: 1024px) {
    .page-id-7727 #full_slider_1 { display: none!important; }}
    @media only screen and (min-width: 1024px) {
    .page-id-7727 #av_section_1 { display: block !important; }}

    @media only screen and (min-width: 767px) {
    .page-id-7727 #full_slider_1 { display: none; }}
    @media only screen and (max-width: 767px) {
    .page-id-7727 #av_section_1 { display: none; }}

    but still see both video and slider on the ipad.
    If anyone has an easy fix, I’d appreciate it. Otherwise, I will find another solution.
    thanks for your help
    n

    #246511

    Hey!

    This code had to do it

    @media only screen and (min-width: 1024px) {
    .page-id-7727 #full_slider_1 { display: none!important; }
    .page-id-7727 #av_section_1 { display: block !important; }}
    @media only screen and (max-width: 1024px) {
    .page-id-7727 #full_slider_1 { display: block!important; }
    .page-id-7727 #av_section_1 { display: none !important; }}

    When code was active i could not see slider and video at the same time resizing the browser window on 1920px screen. You can try adjusting 1024px value on both codes

    Cheers!
    Yigit

    #246621

    YES! that was right!
    Thanks for working on this – and going beyond the ordinary help.
    it’s great now!
    N

    #246661

    Hey!

    You are welcome N, glad we could help :)

    Best regards,
    Yigit

Viewing 18 posts - 1 through 18 (of 18 total)
  • The topic ‘swapping slider on mobile/ipad’ is closed to new replies.