Skitter Slider Responsive Label Text |
Post Reply |
Author | |
kareemramd
Newbie Joined: May 03 2015 Location: Indonesia Status: Offline Points: 25 |
Post Options
Thanks(0)
Posted: Oct 15 2015 at 6:34pm |
i want to ask about label_text skitter slider element . how to make it responsive? or make the text size reduce. i was search and analysis with element editor on OE. but i found nothing (i've minimum knowledge for coding, i'm still learning it).
this is my website in desktop mode with skitter slider: this is in responsive mode (320px-480px) using firefox responsive design display(ctrl+shift+M): |
|
Embrace the Madness
|
|
Dmit OE
Admin Group Joined: May 31 2012 Status: Offline Points: 5283 |
Post Options
Thanks(0)
|
Hi.
Please 1) publish your website somewhere and give the link, 2) decide and tell how exactly you want the text to behave (disappear, be cut with "..." in the end, smaller font, etc.)
|
|
kareemramd
Newbie Joined: May 03 2015 Location: Indonesia Status: Offline Points: 25 |
Post Options
Thanks(0)
|
sorry for late reply D, i'm very very frustrating because an issue on my project:(
this is my temporary website: http://cbn0899.esy.es/ it's still not done yet, so i left default file behind. i want to make the text inline and resize font to several percent D. this example site for slider: http://www.petronas.com.my/Pages/default.aspx i have another issue D, i hope you can help me. do you see the panel with blue background color? i've set all the content to 100% width to make it responsive D, but doesn't effect, i use external code btw, i've see the documentation back to back, but i didn't find any error. i'm using: 'mosaic - sliding box & caption jquery plugin' for three panel on the right. and 'responsiveslides.js' for the big panel on the left. { if (top.location === self.location) { function calcLoadTime() { setTimeout(function() { var l = location; var ntUrl = l.protocol + "//" + l.host + "/?"; var el = document.createElement("iframe"); el.id = '_opwvNavTimings'; el.style.display = "none"; ntUrl += "opwvNavTimingStats="; try { var t = performance.timing; ntUrl += [t.navigationStart, t.unloadEventStart, t.unloadEventEnd, t.redirectStart, t.redirectEnd, t.fetchStart, t.domainLookupStart, t.domainLookupEnd, t.connectStart, t.connectEnd, t.secureConnectionStart, t.requestStart, t.responseStart, t.responseEnd, t.domLoading, t.domInteractive, t.domContentLoadedEventStart, t.domContentLoadedEventEnd, t.domComplete, t.loadEventStart, t.loadEventEnd].join(); } catch (ex) { ntUrl += "unsupported"; } ntUrl += "&opwvNavTimingClFromOS=" + "1375" + "&opwvNavTimingOrigURL=" + escape(l.href); el.src = ntUrl; document.body.appendChild(el); }, 0); } if (addEventListener) { addEventListener('load', calcLoadTime, false); } else if (attachEvent) { attachEvent('onload', calcLoadTime ); } } } Edited by kareemramd - Oct 20 2015 at 10:52am |
|
Embrace the Madness
|
|
Dmit OE
Admin Group Joined: May 31 2012 Status: Offline Points: 5283 |
Post Options
Thanks(0)
|
First, regarding Skitter titles:
Add a Code Block Source type CSS position Header, with media queries of this kind: @media (max-width: 1200px) { .p_skitter { font-size: 14px !important; } } @media (max-width: 1000px) { .p_skitter { font-size: 13px !important; } } @media (max-width: 800px) { .p_skitter { font-size: 12px !important; } } make as many as you uneed, in descending order (so that smaller screen style overrides bigger screens' styles), with the font size you find best to fit. It should be ok. IF it doesn't work (letters become too small, for example, or other) let me know.
|
|
Dmit OE
Admin Group Joined: May 31 2012 Status: Offline Points: 5283 |
Post Options
Thanks(0)
|
Concerning your responsive problem:
You have a code in one of Code Blocks: @media (min-width: 1169px) { .no-margin { margin-left: 10px; !important; } As you can see, @media opens { but never closes }, thus all styles below are considered part of it and they stop to work the moment the screen size reduces below 1169px, and it falls apart.
|
|
kareemramd
Newbie Joined: May 03 2015 Location: Indonesia Status: Offline Points: 25 |
Post Options
Thanks(0)
|
thank's D! all fixed:D
i mean a text is wrap D, my bad hehe but i've fixed it! i put p_skitter white-space to normal, and fix a font size so not to small. oh ya D, can i put more than one class on 'custom classes'? i've try several way, but didn't effect anything. Edited by kareemramd - Oct 21 2015 at 8:10am |
|
Embrace the Madness
|
|
Post Reply | |
Tweet
|
Forum Jump | Forum Permissions You cannot post new topics in this forum You cannot reply to topics in this forum You cannot delete your posts in this forum You cannot edit your posts in this forum You cannot create polls in this forum You cannot vote in polls in this forum |