Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #17318

    Hiya,

    Love the propulsion theme by the way. Best theme ever!

    On the slider it looks great until its scaled down to a small screen like an iphone. When it is the link buttons disappear and it all seems a bit squashed.

    Is there anything to be donw that might improve this?

    Take a look at my site here:

    http://clients.alexdigital.com/euristix/

    -Alex

    #94977

    Hey Alex,

    Not too much unfortunately as the space is determined by the size of the photo and the size of the screen. With your content, one solution would be to remove the captions at that small of a screen size so that it looks less cluttered. Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

    @media only screen and (max-width: 479px) {  #top .slideshow .slideshow_caption {display: none; }
    }

    Regards,

    Devin

    #94978

    Hi Alex,

    The links disappear on purpose and instead a dropdown menu optimized for touching appears in the place of links.which makes life easier for iphone/ipod/android users. If you want to remove that functionality, its possible, but unless visitor use a toothpick, the links would be impossible to press with a human finger.

    With the slider you have some options. Personally I would get rid of the text and the buttons for small screens since its hard to see the image itself so even if the font size is reduced, it would be like trying to read a name on a grain of rice.

    However if you take out 6 words or so out of each slide, it will be alright.

    Add the following to the Quick CSS in the backend or to your custom.css file please

    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px) {
    /*text*/
    .featured_caption {
    font-size: 9px;
    }
    /*position of the button*/
    #top #wrap_all .button_wrap_1 .caption-slideshow-button {
    width: 30%;
    margin: 0 35%;
    line-height: 20px;
    }
    /*position of the transparent overlay*/
    #top .slideshow_inner_caption {
    padding: 3%;
    height: 100%;
    width: 100%;
    line-height: 1.5em;
    }
    /*control the transparent overlay .47 current, 1 = no transparency, 0= full transparency */
    .caption_right_framed .slideshow_caption .slideshow_inner_caption, .caption_left_framed .slideshow_caption .slideshow_inner_caption {
    background: rgba(0, 0, 0, 0.47);
    }
    }

    Thanks,

    Nick

    #94979

    Thanks i’ll give that a try.

    I’ve noticed a couple of other weird things on smaller browsers/screens.

    At certain sizes the menu goes onto two lines:

    http://screencast.com/t/i3NSwAhijKQw

    And on some sizes the drop down menu isn’t appearing.

    http://screencast.com/t/BjVtv7fKuJFI

    Any ideas?

    thanks.

    #94980

    There shouldn’t be any reason why the dropdown wouldn’t show up and if you can pinpoint in what browser and under what circumstances that happens, we can see about fixing that.

    The two line menu however is the nature of the adaptive size. The space shrinks and you can either lose part of the menu or it can wrap.

    Regards,

    Devin

    #94981

    Pardon, if this has been answered somewhere else, but I can’t find it. My question is… is there anyway to edit the items in the dropdown menu that shows up on mobile devices that reads “Select a Page”? Specifically, I want to delete “Archive, site map, blog, gallery etc” I want to have these link to Pages I’ve created. The theme I’m using is Angular. Thanks!

    #94982

    Hi jamesbrooks,

    You can edit the menu items by going to Appearance>Menus in the WordPress backend. If you have any other questions, make sure to post them in the Angular forum.

    Regards,

    Devin

    #94983

    Thanks Devin. I’ll post the right way next time. Thanks man!

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Slider Slideshow on small screens (Responsive)’ is closed to new replies.