BullGuard Antivirus Sale - 60% Off with openElement !
Forum Home Forum Home >

openElement

> Element Editor
  New Posts New Posts RSS Feed - Skitter Slider Responsive Label Text
  FAQ FAQ  Forum Search   Register Register  Login Login

Skitter Slider Responsive Label Text

 Post Reply Post Reply
Author
Message
kareemramd View Drop Down
Newbie
Newbie
Avatar

Joined: May 03 2015
Location: Indonesia
Status: Offline
Points: 25
Post Options Post Options   Thanks (0) Thanks(0)   Quote kareemramd Quote  Post ReplyReply Direct Link To This Post Topic: Skitter Slider Responsive Label Text
    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
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post 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.)
Back to Top
kareemramd View Drop Down
Newbie
Newbie
Avatar

Joined: May 03 2015
Location: Indonesia
Status: Offline
Points: 25
Post Options Post Options   Thanks (0) Thanks(0)   Quote kareemramd Quote  Post ReplyReply Direct Link To This Post 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 ); } } }

Edited by kareemramd - Oct 20 2015 at 10:52am
Embrace the Madness
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post 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.
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post 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.
Back to Top
kareemramd View Drop Down
Newbie
Newbie
Avatar

Joined: May 03 2015
Location: Indonesia
Status: Offline
Points: 25
Post Options Post Options   Thanks (0) Thanks(0)   Quote kareemramd Quote  Post ReplyReply Direct Link To This Post 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.



Edited by kareemramd - Oct 21 2015 at 8:10am
Embrace the Madness
Back to Top
 Post Reply Post Reply
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

This page was generated in 0.063 seconds.