Skitter Slider Responsive Label Text

Printed From: openElement Website
Category:

openElement

Forum Name: Element Editor
Forum Description: Create and share your own custom elements to use with openElement
URL: https://forums.openelement.uk/en/forum_posts.asp?TID=511
Printed Date: Apr 19 2024 at 4:10am
Software Version: Web Wiz Forums 12.04 - http://www.webwizforums.com

Topic: Skitter Slider Responsive Label Text

Posted By: kareemramd
Subject: Skitter Slider Responsive Label Text
Date 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

Replies:

Posted By: Dmit OE
Date Posted: Oct 15 2015 at 9:58pm

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.)

Posted By: kareemramd
Date Posted: Oct 20 2015 at 8:12am

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 ); } } }

-------------
Embrace the Madness

Posted By: Dmit OE
Date Posted: Oct 20 2015 at 12:24pm

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.

Posted By: Dmit OE
Date Posted: Oct 20 2015 at 12:30pm

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.

Posted By: kareemramd
Date Posted: Oct 21 2015 at 7:28am

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.

-------------
Embrace the Madness