Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Tue 03 Sep 2019, 11:49
» GIFActif - Giphy Button for the Editor
by Ange Tuteur Wed 08 May 2019, 17:21
» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28
» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15
» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11
» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24
» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58
» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50
» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22
» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12
» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10
» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51
» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11
» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19
» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34
by Ange Tuteur Tue 03 Sep 2019, 11:49
» GIFActif - Giphy Button for the Editor
by Ange Tuteur Wed 08 May 2019, 17:21
» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28
» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15
» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11
» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24
» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58
» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50
» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22
» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12
» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10
» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51
» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11
» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19
» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34
Recent Tutorials
Top posting users this month
Top Achievers
Who is online?
In total there are 27 users online :: 0 Registered, 0 Hidden and 27 Guests :: 2 Bots
None
Most users ever online was 515 on Tue 14 Sep 2021, 15:24
None
Most users ever online was 515 on Tue 14 Sep 2021, 15:24
i need a tab responsive code
Page 1 of 1 • Share
- sohab
- Gender :
Posts : 140
Points : 3265
Reputation : 2
Language : frensh
Browser :
Forum Version : 
-
sohab Fri 12 Aug 2016, 16:57
can you help me
i want a code for responsive tab i want it in the subjet
i want a code for responsive tab i want it in the subjet
- Ange Tuteur
Administrator - Gender :
Posts : 4741
Points : 12256
Reputation : 2376
Location : Pennsylvania
Language : EN, JA, FR
Browser :
Forum Version : 
-
Ange Tuteur Sat 13 Aug 2016, 15:11
Hi @sohab,
Here's a quick example of responsive cells :
Add it anywhere you want. Each "cell" will display below one another if the screen width is at or below 768px. Replace CONTENT with whatever you want, and feel free to modify the CSS to change the style.
Here's a quick example of responsive cells :
- Code:
<style>.width-box { width:100%; }
.inline-row {
float:left;
width:50%;
}
.padding-box {
background:#EEE;
border:1px solid #CCC;
padding:3px;
text-align:center;
}
.clear-box { clear:both; }
@media (min-width:0px) and (max-width:768px) {
.inline-row {
float:none;
width:100%;
}
}</style>
<div class="width-box">
<div class="inline-row">
<div class="padding-box">CONTENT</div>
</div>
<div class="inline-row">
<div class="padding-box">CONTENT</div>
</div>
<div class="inline-row">
<div class="padding-box">CONTENT</div>
</div>
<div class="inline-row">
<div class="padding-box">CONTENT</div>
</div>
<div class="inline-row">
<div class="padding-box">CONTENT</div>
</div>
<div class="inline-row">
<div class="padding-box">CONTENT</div>
</div>
<div class="clear-box"></div>
</div>
Add it anywhere you want. Each "cell" will display below one another if the screen width is at or below 768px. Replace CONTENT with whatever you want, and feel free to modify the CSS to change the style.
- sohab
- Gender :
Posts : 140
Points : 3265
Reputation : 2
Language : frensh
Browser : Forum Version : -
sohab Sat 13 Aug 2016, 18:42
but i want add this i n the subjet
i want the BBCode
i want the BBCode
- Ange TuteurAdministrator
- Gender :
Posts : 4741
Points : 12256
Reputation : 2376
Location : Pennsylvania
Language : EN, JA, FR
Browser : Forum Version : -
Ange Tuteur Sat 13 Aug 2016, 19:44
You could use a table like this :
and add this CSS to your stylesheet :
- Code:
[table class="resp-table"]
[tr][td]CONTENT[/td][td]CONTENT[/td][/tr]
[tr][td]CONTENT[/td][td]CONTENT[/td][/tr]
[tr][td]CONTENT[/td][td]CONTENT[/td][/tr]
[/table]
and add this CSS to your stylesheet :
- Code:
.resp-table { width:100%; }
.resp-table td {
width:50%;
text-align:center;
background:#FFF;
border:1px solid #CCC;
}
@media (min-width:0px) and (max-width:768px) {
.resp-table td {
display:block;
width:100%;
margin:3px 0;
}
}
- sohab
- Gender :
Posts : 140
Points : 3265
Reputation : 2
Language : frensh
Browser : Forum Version : -
sohab Sat 13 Aug 2016, 20:11
thanks a lot
i want just show the table in the center in the mobile
and have some espage beetwen tr
i want just show the table in the center in the mobile
and have some espage beetwen tr
- Ange TuteurAdministrator
- Gender :
Posts : 4741
Points : 12256
Reputation : 2376
Location : Pennsylvania
Language : EN, JA, FR
Browser : Forum Version : -
Ange Tuteur Sun 14 Aug 2016, 16:54
Add a [center] tag around the table to center it.
As for the spacing, try increasing the "3px" here :
As for the spacing, try increasing the "3px" here :
- Code:
margin:3px 0;
- sohab
- Gender :
Posts : 140
Points : 3265
Reputation : 2
Language : frensh
Browser : Forum Version : -
sohab Sun 14 Aug 2016, 17:40
ok thankss
- Ange TuteurAdministrator
- Gender :
Posts : 4741
Points : 12256
Reputation : 2376
Location : Pennsylvania
Language : EN, JA, FR
Browser : Forum Version : -
Ange Tuteur Sun 14 Aug 2016, 18:43
You're welcome. ^^
Topic archived
Have a good day.
Topic archived
Have a good day.
- Sponsored content
Sponsored content
Similar topics
Create an account or log in to leave a reply
You need to be a member in order to leave a reply.
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum