Tagged: , ,

Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • March 20, 2014 at 10:41 am #240618
    Munford

    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 8 years, 7 months ago by Yigit.
    March 20, 2014 at 6:08 pm #240815
    Yigit

    Hey Munford!

    Please add

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

    Best regards,
    Yigit

    March 21, 2014 at 9:39 am #241066
    Munford

    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

    March 21, 2014 at 1:51 pm #241152
    Yigit

    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

    March 21, 2014 at 4:08 pm #241229
    Munford

    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

    March 24, 2014 at 2:43 pm #242085
    Yigit

    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

    March 24, 2014 at 5:33 pm #242197
    Munford

    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 10 years, 8 months ago by Munford.
    March 24, 2014 at 8:16 pm #242311
    Yigit

    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

    March 24, 2014 at 11:50 pm #242404
    Munford

    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 10 years, 7 months ago by Munford.
    March 28, 2014 at 1:06 am #244123
    Yigit

    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

    March 28, 2014 at 8:51 am #244244
    Munford

    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

    March 28, 2014 at 2:03 pm #244347
    Ismael

    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

    April 1, 2014 at 8:51 am #245878
    Munford

    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 8 years, 7 months ago by Yigit.
    April 1, 2014 at 10:06 pm #246269
    Devin

    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

    April 2, 2014 at 9:28 am #246424
    Munford

    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

    April 2, 2014 at 1:25 pm #246511
    Yigit

    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

    April 2, 2014 at 5:14 pm #246621
    Munford

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

    April 2, 2014 at 6:32 pm #246661
    Yigit

    Hey!

    You are welcome N, glad we could help :)

    Best regards,
    Yigit

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