Footer tablet

how can make the footer with an accordion for tablet? viewpoint just like the mobile viewpoint

Please check the attached screenshot

Thanks

Attachments:

You must be logged in to view attached files.

Hello,

You need the Footer to be in widgets and you can enable collapse of the widgets on mobile in the Theme Settings > Footer.

If you created the Footer as an HTML block it would not work.

Best Regards

Hi

Thank you for the reply!
as stated in my first topic! i have it on mibile and i need for Tablet! and i have also as widget

but i need this to be also collapsed for Tablet viewpoint

Hello,

Please add this code to the Theme Settings > Custom CSS > Tablet:

.footer-widget-collapse > *:not(.widget-title):not(:first-child) {
    display: none;
    margin-top: 20px; }
  .footer-widget-collapse .widget-title {
    position: relative;
    margin-bottom: 0;
    padding-right: 22px; }
    .footer-widget-collapse .widget-title:after {
      position: absolute;
      top: calc(50% - 12px);
      right: 0;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      color: #333;
      vertical-align: middle;
      text-align: center;
      font-weight: 600;
      font-size: 10px;
      line-height: 24px;
      transition: all .25s ease;
      content: "\f129";
      font-family: "woodmart-font"; }
  .footer-widget-collapse.footer-widget-opened .widget-title:after {
    background-color: #F9F9F9;
    transform: rotate(180deg); }
  .color-scheme-light .footer-widget-collapse .widget-title:after {
    color: #FFF; }
  .color-scheme-light .footer-widget-collapse.footer-widget-opened .widget-title:after {
    background-color: #FFF;
    color: #333; }

Add this code to the Theme Settings > Custom JS:

jQuery('.footer-widget-collapse .widget-title').on('click', function() {
			var $title = jQuery(this);
			var $widget = $title.parent();
			var $content = $widget.find('> *:not(.widget-title)');
			if ($widget.hasClass('footer-widget-opened')) {
				$widget.removeClass('footer-widget-opened');
				$content.stop().slideUp(200);
			} else {
				$widget.addClass('footer-widget-opened');
				$content.stop().slideDown(200);
			}
		});

Best Regards

Hi there!

this doesn’t work and it changes the layout of the footer completely and also appear in the desktop!

i just want the footer to break and look with accordion just like in mobile

Hello,

Please make sure you have inserted the CSS code in the proper section: not General/Desktop only Tablet.

Please add this custom CSS accordingly:

footer .footer-column.col-sm-6 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
footer .footer-column.col-sm-4 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

If you still have the problem, please update your access, I cannot log in with old credentials.

Best Regards

Perfect! this has worked

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts