closed resolvedHiya,
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
Devin
Moderator
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
Nick
Moderator
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
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.
Devin
Moderator
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
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!
Thanks Devin. I'll post the right way next time. Thanks man!
This topic has been closed to new replies.
Please start by registering an account for this forum here
Create a new thread and tell me what problems you are encountering and what you want to know.
There is no step 3 :)
We try to answer all questions within a day, monday-friday.
