Viewing 24 posts - 1 through 24 (of 24 total)
  • Author
    Posts
  • #374468

    Hi,

    I’ve tested my site on an iPad and have noticed a number of issues:

    1. The logo overlaps the main menu text

    2. The main text layer has not scaled down – it’s too big/not visible

    3. There’s no navigation system (thumbnails) at bottom of slides

    However.. the other issue I’ve asked for help with which involves timing of slide transitions (I’ve noticed this when I view site on my computer) is not there! Very confusing..

    Would appreciate your help with the above.

    Regards,

    Steve

    #374720

    Hey stevewturnbull!

    1. Instead of the normal menu, you can use the mobile menu:

    @media only screen and (max-width: 1024px) {
    .html_mobile_menu_tablet .container #advanced_menu_toggle, .html_mobile_menu_tablet #advanced_menu_hide {
    display: block;
    }
    .main_menu {
    display: none;
    }
    #mobile-advanced {
    display: block;
    }}
    

    2. You need to adjust the text position/size layer in layer slider options.

    3. It’s there, but it only appears while clicking on the image of the slider. However with this code you can make it appear permanently:

    .avia-layerslider .ls-bottom-nav-wrapper {
    display: bock !important;
    }
    

    Regards,
    Andy

    #374806

    Hi Andy,

    Many thanks for your help :) I will check out the menu code. And I’ve noted No. 3.

    With issue No. 2 though I don’t want to alter the text/layer – it’s exactly how I want it. I just want it to scale down proportionately/responsively for the tablet screen?

    Cheers,

    Steve

    #374912

    Hey!

    2.) Edit the layer then go to Attributes panel. Add a class or id. Use this selector plus css media queries on the Quick CSS field.

    Best regards,
    Ismael

    #374970
    This reply has been marked as private.
    #376141

    Hi!

    Please try adjusting “responsive under” and “layers container” values in LayerSlider WP > Slider Settings > Layout and check if that helps – http://i.imgur.com/E2YOJ5x.png

    Best regards,
    Yigit

    #376709

    Hi Yigit,

    Still no joy I’m afraid :(

    I’ve fiddled with all the settings.. And the problem is the logo in header isn’t scaling responsively either.

    In contrast, the slider behaves fine on tablet but not on full computer screen..!

    Can you login using the admin I’ve sent and have a look please. Thanks.

    http://www.cardabelleholidays.com

    Kind regards,

    Steve

    #377683

    Hi Steve!

    Please post the login details here as a private reply.

    Best regards,
    Josue

    #377776
    This reply has been marked as private.
    #378650

    Hi Steve!

    You forgot the password for the user.

    Best regards,
    Josue

    #378685
    This reply has been marked as private.
    #379623

    Hi Steve!

    Please check the first slide on the iPad, whenever you want to have a caption aligned to the right use this values – http://screencast.com/t/pw0A3tidM

    Best regards,
    Josue

    #380266

    Thanks Josue :)

    But I still have the other problems..

    Making the large white text – ‘Welcome to the undiscovered heart of the Languedoc..’ – and the logo scale down responsively.

    Plus the slider isn’t working (last slides don’t fade properly on computer like they do on tablet).

    Can you help with these please.

    Thanks.

    Steve

    #381976

    Hi Steve!

    1. Where is that text located?

    2. Logo normally doesn’t scale down (you can check it here), however if you want to scale it down at a certain screen size use this code in Quick CSS:

    @media only screen and (max-width: 1200px) {
        .responsive .logo img {
            max-width: 330px;
            height: 100%;
        }
    }

    3. Couldn’t note on my end, on which browser are you experiencing this?

    Regards,
    Josue

    #382328

    Hi Josue,

    1. I’ve put the text back in LayerSlider – it’s a PNG file (couldn’t use text as it isn’t Google font).

    2. I’ve tried the code/fiddling with settings but no joy I’m afraid. The logo is either stretched or squashed.

    3. I’ve been using Safari.

    Thanks,

    Steve

    #384828

    Hi!

    Can you please provide a screenshot of the logo? I added a layers container value on the Slider Settings to keep the images responsive on smaller screens.

    Regards,
    Ismael

    #388265
    This reply has been marked as private.
    #388939

    Hey!

    I noticed you’re not using any special animation on the slider and since you set the slider height to 800px, to emulate fullscreen sliders, I guess the screen resolution of your monitor 1920x1080px. The height setting may just be too much for smaller display resolutions. My suggestion is to use the Fullscreen Slider which responsively calculates the browser height, instead of the Advance Layer Slider.

    Cheers!
    Ismael

    #388996

    Hi Ismael,

    But the problem with Fullscreen (and FullWidth) Slider is captions – I’m using an image file to import the text caption because the font I’m using is not a Google one..

    Also you didn’t mention the logo?

    Regards,

    Steve

    #390697

    Hi!

    You can add html codes on the fullscreen slider’s caption fields. For example:

    <img src="IMAGE URI HERE">
    

    Regarding the logo, please remove or adjust this code located on the Quick CSS field:

    @media only screen and (max-width: 1000px) {
    .responsive .logo img {
    max-width: 300px;
    height: 100%;
    }}

    Best regards,
    Ismael

    #393121

    Hi Ismael,

    Thanks – I’ll try using HTML for text.

    I’ve had no success with adjusting/deleting the code for the logo though. When I view it on my iPad using Safari it’s still not working – the logo hasn’t scaled responsively with menu and overlaps text..?

    Regards,

    Steve

    #394166

    Hi!

    I was able to see the logo issue on smaller screen sizes but I’m not sure if that’s the one you’re referring to. If possible, please provide a screenshot. You can use imgur, dropbox etc.

    Cheers!
    Ismael

    #394351

    Hi Ismael,

    The screenshot isn’t working on my iPad unfortunately.

    As mentioned above, the logo is ‘Cardabelle Holidays’ (has a sunshine graphic in middle) at the top left of menu.

    Regards,

    Steve

    #396436

    Hey Steve!

    There are two options:
    1. Make the mobile menu appear sooner (overlap seems to occurs around 1200px):

    @media only screen and (max-width: 1200px) {
        .html_mobile_menu_tablet .main_menu , .html_mobile_menu_tablet #header_main_alternate{display:none;}
        .html_mobile_menu_tablet .container #advanced_menu_toggle, .html_mobile_menu_tablet #advanced_menu_hide{display:block;}
        .html_mobile_menu_tablet #mobile-advanced{display:block;}
    }

    2. Reduce the logo dimensions from 1200px until the 989px (where the mobile menu appears):

    @media only screen and (min-width: 989px) and (max-width: 1200px) {
        .logo{
            top: 25px;
            width: 30%;
        }
    }

    Cheers!
    Josue

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