Support Forums

Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

How to make SP Tab Add-on in OneClip template behave fully responsively ?

Featured Lock Resolved Task
Hi, could you confirm -

What the current custom.css code is needed to make the SP Tab add-on in OneClip behave the way SP Tab behaves responsively in Aspasia template ?

Background testing from my end (if you need):

Basically my issue with how to ensure that my custom.css will make SP Tab in OneClip behave like SP Tab in Aspesia template. Currently my custom CSS from Firebug testing is not working too well in responsive mode because at 480px media screen width the last of my tabs item (icon/title) is not running over or folding to next line like in Aspasia.

How do I fix?

My firebug code to eventually place custom.css is as follows:

.sppb-nav-tabs > li > a {
border: none !important;
background: none !important;
color: #000;
font-weight: normal;
font-size: 18px;
padding: 10px;
line-height: 1.5em;
}


.sppb-nav > li > a {
position: relative;
display: block;
padding: 10px 15px;
}


.sppb-addon-tab .sppb-nav-tabs {
background-color: #f7f7f7;
border: none;
border-radius: 3px;
padding: 0 5px;
margin-bottom: 40px;
text-align: center;
display: inline-flex;
}


I would greatly appreciate your expert input as to what else should be there or whether there is better CSS code to get the styling and responsive behaviour I want.

Thanks in advance.

Attachments (4)

  • firebug SP Tab styling.png
    firebug SP Tab styling.png 35.3 KB
  • @480px media row is cut off.png
    @480px media row is cut off.png 25.4 KB
  • Aspasia SP Tab.png
    Aspasia SP Tab.png 132.9 KB
  • Aspasia SP Tab @360px screen width .png
    Aspasia SP Tab @360px screen width .png 58.1 KB

7 Answers

Please login to view replies.

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 148
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 118
Toufiq

Toufiq

Total Accepted Answers: 51
Pavel

Pavel

Total Accepted Answers: 4
JD

Josh Douglas

Total Accepted Answers: 3

100+

Templates

200,000+

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us