Tabs, Slider Navigation, Arrows, Ajax

Hi Elliottt,

AAAAAWESOME! Thank you :)

1) I managed to display the tabs underneath from iPad portrait mode descending. But unfortunately, the columns inside the tabs still look messed up like in the screenshot in my post above. Any ideas?

And I’d like to have the first tab closed in responsive mode.

Thanks,
Jan :)

• This reply was modified 10 years ago by WEBIGAMI.

Hi Ismael,

it did that. It still creates this big border from the second tab on (in this example “iPhone 6”):

http://justcom-hamburg.de/reparaturen/iphone-reparatur/#tab-id-2

Any more ideas? :(

Jan

Hey Elliott,

I switched to Toggles now. I hope the client will be fine with that ;)

I have the same problem here with the white space from the second toggle on upwards. Here ist the code in the toggles:

<p style="text-align: center;">[av_one_fourth first]</p>
<p style="text-align: center;">[av_font_icon icon='ue8ac' font='entypo-fontello' style='' caption='Display' link='' linktarget='' size='30px' position='center' color='#42a72b'][/av_font_icon]</p>

<h6 style="text-align: center;">DISPLAY</h6>
<p style="text-align: center;">Bildschirm, Glas</p>
<p style="text-align: center;">[av_button label='99,- €' link='http://justcom-hamburg.de/reparaturen/iphone-displayschaden/#5s' link_target='' size='small' position='center' icon_select='yes-right-icon' icon_hover='aviaTBaviaTBaviaTBicon_hover' icon='ue87d' font='entypo-fontello' color='theme-color' custom_bg='#444444' custom_font='#ffffff']</p>
<p style="text-align: center;"><a title="Filialen" href="http://justcom-hamburg.de/filialen/">Filiale</a>
<a href="http://www.justcom-shop.de" target="_blank">Webshop</a></p>
<p style="text-align: center;">[/av_one_fourth][av_one_fourth]</p>
<p style="text-align: center;">[av_font_icon icon='ue8a0' font='entypo-fontello' style='' caption='' link='' linktarget='' size='30px' position='center' color='#42a72b'][/av_font_icon]</p>

<h6 style="text-align: center;">AKKU</h6>
<p style="text-align: center;">Batterie, Anschlüsse</p>
<p style="text-align: center;">[av_button label='39,- €' link='manually,http://' link_target='' size='small' position='center' icon_select='yes-right-icon' icon_hover='aviaTBaviaTBaviaTBicon_hover' icon='ue87d' font='entypo-fontello' color='theme-color' custom_bg='#444444' custom_font='#ffffff']</p>
<p style="text-align: center;"><a title="Filialen" href="http://justcom-hamburg.de/filialen/">Filiale</a>
<a href="http://www.justcom-shop.de" target="_blank">Webshop</a></p>
<p style="text-align: center;">[/av_one_fourth][av_one_fourth]</p>
<p style="text-align: center;">[av_font_icon icon='ue817' font='entypo-fontello' style='' caption='' link='' linktarget='' size='30px' position='center' color='#42a72b'][/av_font_icon]</p>

<h6 style="text-align: center;">SCHALTER</h6>
<p style="text-align: center;">Buttons, Lautstärkeregler</p>
<p style="text-align: center;">[av_button label='59,- €' link='manually,http://' link_target='' size='small' position='center' icon_select='yes-right-icon' icon_hover='aviaTBaviaTBaviaTBicon_hover' icon='ue87d' font='entypo-fontello' color='theme-color' custom_bg='#444444' custom_font='#ffffff']</p>
<p style="text-align: center;"><a title="Filialen" href="http://justcom-hamburg.de/filialen/">Filiale</a>
<a href="http://www.justcom-shop.de" target="_blank">Webshop</a></p>
<p style="text-align: center;">[/av_one_fourth][av_one_fourth]</p>
<p style="text-align: center;">[av_font_icon icon='ue854' font='entypo-fontello' style='' caption='' link='' linktarget='' size='30px' position='center' color='#42a72b'][/av_font_icon]</p>

<h6 style="text-align: center;">TON</h6>
<p style="text-align: center;">Mikrofon, Lautsprecher</p>
<p style="text-align: center;">[av_button label='59,- €' link='manually,http://' link_target='' size='small' position='center' icon_select='yes-right-icon' icon_hover='aviaTBaviaTBaviaTBicon_hover' icon='ue87d' font='entypo-fontello' color='theme-color' custom_bg='#444444' custom_font='#ffffff']</p>
<p style="text-align: center;"><a title="Filialen" href="http://justcom-hamburg.de/filialen/">Filiale</a>
<a href="http://www.justcom-shop.de" target="_blank">Webshop</a></p>
<p style="text-align: center;">[/av_one_fourth]</p>
<p style="text-align: center;">[av_hr class='default' height='50' shadow='no-shadow' position='center' custom_border='av-border-thin' custom_width='50px' custom_border_color='' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='yes' custom_icon_color='' icon='ue808' font='entypo-fontello'][av_one_fourth first]</p>
<p style="text-align: center;">[av_font_icon icon='ue8cd' font='entypo-fontello' style='' caption='' link='' linktarget='' size='30px' position='center' color='#42a72b'][/av_font_icon]</p>

<h6 style="text-align: center;">WASSERSCHADEN</h6>
<p style="text-align: center;">Totalausfall, Wasserschaden</p>
<p style="text-align: center;">[av_button label='49,- €' link='manually,http://' link_target='' size='small' position='center' icon_select='yes-right-icon' icon_hover='aviaTBaviaTBaviaTBicon_hover' icon='ue87d' font='entypo-fontello' color='theme-color' custom_bg='#444444' custom_font='#ffffff']</p>
<p style="text-align: center;"><a title="Filialen" href="http://justcom-hamburg.de/filialen/">Filiale</a>
<a href="http://www.justcom-shop.de" target="_blank">Webshop</a></p>
<p style="text-align: center;">[/av_one_fourth][av_one_fourth]</p>
<p style="text-align: center;">[av_font_icon icon='ue848' font='entypo-fontello' style='' caption='' link='' linktarget='' size='30px' position='center' color='#42a72b'][/av_font_icon]</p>

<h6 style="text-align: center;">GEHÄUSE</h6>
<p style="text-align: center;">Back-Cover, Rahmen</p>
<p style="text-align: center;">[av_button label='239,- €' link='manually,http://' link_target='' size='small' position='center' icon_select='yes-right-icon' icon_hover='aviaTBaviaTBaviaTBicon_hover' icon='ue87d' font='entypo-fontello' color='theme-color' custom_bg='#444444' custom_font='#ffffff']</p>
<p style="text-align: center;"><a title="Filialen" href="http://justcom-hamburg.de/filialen/">Filiale</a>
<a href="http://www.justcom-shop.de" target="_blank">Webshop</a></p>
<p style="text-align: center;">[/av_one_fourth][av_one_fourth]</p>
<p style="text-align: center;">[av_font_icon icon='ue803' font='entypo-fontello' style='' caption='' link='' linktarget='' size='30px' position='center' color='#42a72b'][/av_font_icon]</p>

<h6 style="text-align: center;">SONSTIGE DEFEKTE</h6>
<p style="text-align: center;">Wir finden den Fehler</p>
<p style="text-align: center;">[av_button label='ab 29,- €' link='manually,http://' link_target='' size='small' position='center' icon_select='yes-right-icon' icon_hover='aviaTBaviaTBaviaTBicon_hover' icon='ue87d' font='entypo-fontello' color='theme-color' custom_bg='#444444' custom_font='#ffffff']</p>
<p style="text-align: center;"><a title="Filialen" href="http://justcom-hamburg.de/filialen/">Filiale</a>
<a href="http://www.justcom-shop.de" target="_blank">Webshop</a></p>
<p style="text-align: center;">[/av_one_fourth][av_one_fourth]</p>
<p style="text-align: center;">[av_font_icon icon='ue856' font='entypo-fontello' style='' caption='' link='' linktarget='' size='30px' position='center' color='#42a72b'][/av_font_icon]</p>

<h6 style="text-align: center;">WEITERE REPARATUREN</h6>
<p style="text-align: center;">PCs, Konsolen, iPods</p>
<p style="text-align: center;">[av_button label='ab 39,- €' link='manually,http://' link_target='' size='small' position='center' icon_select='yes-right-icon' icon_hover='aviaTBaviaTBaviaTBicon_hover' icon='ue87d' font='entypo-fontello' color='theme-color' custom_bg='#444444' custom_font='#ffffff']</p>
<p style="text-align: center;"><a title="Filialen" href="http://justcom-hamburg.de/filialen/">Filiale</a>
<a href="http://www.justcom-shop.de" target="_blank">Webshop</a></p>
<p style="text-align: center;">[/av_one_fourth]</p>

Moreover, I’d lilke to:

1) align center the sort tags above the toggles
2) change the font size and colour of the sort tags
3) change the colour and font size of the toggle titles

Please see a screenshot of the current view with the left aligned sort tags, the small font and the small toggle titles:

Thank you so much! I really appreciate!

Cheers,
Jan :)

Hi Ismael,

awesome, it worked!

One more thing: How can I change the Toggle Titles font size and colour?

Thanks and cheers,
Jan :)

Hey Elliott,

thank you!

One more thing:

How can I increase the padding between two portfolio rows (e.g. between 5 columns in the first and 5 columns in the second row). Important: The padding between the title and the title-image musn’t be affected.

Thank you,
Jan :)