Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • August 8, 2019 at 3:20 pm #1125952
    odisseas

    TAB Section section isnt mobile frendly. If you have many tabs in the mobile you see only the 2 of them. You can scroll to right but only if you guess. Could you make, with little custom css in mobile, the tabs go one above the other?
    or a simple flashing arrow “>” to scroll to the left?

    August 8, 2019 at 3:23 pm #1125953
    odisseas

    Look at this with mobile

    Tab Section

    August 11, 2019 at 8:59 pm #1126657
    Basilis

    Hi,

    What do you think is a good suggestion for this?

    Best regards,
    Basilis

    August 13, 2019 at 10:40 pm #1127437
    FloppySocks

    I agree with this entirely. It is not clear to mobile users that additional menu items exist, and it is not intuitive. In fact, I have received numerous complaints from people using my company’s website on mobile.

    Odisseas’s suggestion to “stack” the menu items on mobile would be a good solution, or AT LEAST provide some kind of indication to suggest that there are additional menu items would be very helpful. Would really like Enfold/Kriesi to address this as I have seen numerous complaints on the Enfold support forums about it, but no solutions aside from “This is working as intended.” Which, I don’t think is a good solution to a very real issue!

    Thanks Enfold support for considering this fix.

    August 15, 2019 at 2:12 pm #1127935
    Victoria

    Hi FloppySocks,

    Thank you for your input, I forwarded this as an improvement request.

    Please have a look at h these threads:

    How to add arrows to a tab section on mobile

    Mobile Settings and Tab Section

    Best regards,
    Victoria

    August 28, 2019 at 5:38 pm #1131693
    odisseas

    The arrows is OK, but is there a way to make the arrows clickable?

    August 28, 2019 at 6:53 pm #1131711
    Guenni007

    Well if you like to have a more complex but nice solution go and Mikes advice and use the flex model :

    try in quick css – and a link to your site would be nice:

    .av-tab-section-tab-title-container {
  display:flex !important;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: center;
  width: 100vw !important;
  min-width: 0 !important;
  padding: 0;
  margin: 0;
  left: 0 !important;
}

#top .av-section-tab-title {
  padding: 0 ;
  flex: 0 1 auto;
  min-width: 20%;
}

.av-outer-tab-title {
  display: inline-block;
}

.av-tab-section-image,
.av-tab-arrow-container {
  background-position: center center;
  position: relative;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
    August 28, 2019 at 7:07 pm #1131713
    Guenni007

    you can play with this :

    #top .av-section-tab-title {
  padding: 0 ;
  flex: 0 1 auto;
  min-width: 10%;
}

    and this is the arrow color:

    #top .av-tab-arrow-container span {
  background-color: #900
}

    maybe 10% is enough for your setting.

    For tab-section with icons – we had to complete the code above with :

    .av-tab-section-icon {
	display: block;
	text-align: center;
	position: relative;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	padding-bottom: 40px;
}
    August 29, 2019 at 6:10 am #1131790
    Guenni007

    if you like to put it in media-query you can decide when this behaviour starts to work.
    you can play a little with flex styling f.e. take wrap-reverse instead of wrap and see what happens.
    space- between (instead of space-around) would line the outer items to the borders of the container
    this is a good – but german site – but you will see on the images what happens on changing styling and you can dynamically change by Radio Button the layout: https://www.mediaevent.de/css/display-flex.html
    For that example page above the 1180px seems to be a good starting point to work for flex model.

    @media screen and (max-width:1180px) {
  .av-tab-section-tab-title-container {
    display:flex !important;
    flex-flow: row wrap-reverse;
    justify-content: space-around;
    align-items: center;
    width: 100vw !important;
    min-width: 0 !important;
    padding: 0;
    margin: 0;
    left: 0 !important;
  }

  #top .av-section-tab-title {
    padding: 0 ;
    flex: 0 1 auto;
    min-width: 20%;
  }

  .av-outer-tab-title {
    display: inline-block;
  }

  .av-tab-section-image,
  .av-tab-arrow-container {
    background-position: center center;
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .av-tab-section-icon {
    display: block;
    text-align: center;
    position: relative;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding-bottom: 40px;
  }
}
  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.