Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • March 28, 2024 at 7:49 am #1438517
    Renard

    Hi,

    Is it possible to have the tabs in one line for mobile phones?
    Link in private content.

    Thanks

    March 28, 2024 at 8:11 am #1438523
    Ismael

    Hey Renard,

    Thank you for the inquiry.

    You can add this css code to adjust the size of the tabs and make sure they align properly on smaller screens:

    @media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  #top .av-pill-tabs .av-section-tab-title {
    margin-right: 10px;
    padding: 0 !important;
  }

  .av-pill-tabs .av-inner-tab-title {
    color: #FFFFFF;
    font-size: 0.9em;
    margin-bottom: 0px !important;
    line-height: .5em;
    padding: 8px !important;
  }
}

    Best regards,
    Ismael

    April 2, 2024 at 3:28 am #1438946
    Renard
    This reply has been marked as private.
    April 2, 2024 at 8:27 am #1438962
    Ismael

    Hi,

    Thank you for the update.

    We recommend adding it at the very bottom of the style.css file or in the Enfold > General Styling > Quick CSS field. It is conventional and good practice to place css media queries at the very bottom of the stylesheet.

    Best regards,
    Ismael

    April 2, 2024 at 8:48 am #1438964
    Renard

    Hi Ismael,

    I have tried adding the code and it seems to work fine on devices such as XR up to tablet dimensions. However, not all mobiles shows the tabs in one line. For your further assistance, please. Sharing with you the code for the pill-shaped tabs I included in the Quick CSS.

    /* Tabs Pill Shape*/
    .av-pill-tabs .av-tab-section-tab-title-container a {
    background: #0B897A;
    border-radius: 5px;
    padding: 0!important;
    margin-top: -10px;
    overflow: hidden;
    }

    .av-pill-tabs .av-outer-tab-title {
    padding: 0px!important;
    margin: 0 !important;
    }

    /* Tab arrow */
    .av-pill-tabs .av-tab-arrow-container {
    top: 5px;
    }
    #top .av-pill-tabs .av-tab-arrow-container span {
    background: #ffffff;
    }

    /* Add your Mobile Styles here */
    #top .av-pill-tabs .av-section-tab-title {
    margin-right: 8px;
    padding: 0 !important;
    }

    .av-pill-tabs .av-inner-tab-title {
    color: #FFFFFF;
    font-size: 0.9em;
    margin-bottom: 0px !important;
    line-height: .5em;
    padding: 8px !important;
    }
    }

    • This reply was modified 7 months, 3 weeks ago by Renard. Reason: Edited css code
    April 3, 2024 at 1:45 am #1439033
    Renard

    Hello, In regards to my concern above, is it possible to adjust and reduce the width of the tabs so they will fit smaller screens? For your assistance, please.

    Would also like your help in making the content below the tabs centered when viewed on other devices. The link is in private content. Thank you so much!

    April 3, 2024 at 6:42 am #1439052
    Ismael

    Hi,

    Thank you for the update.

    Have you tried adjusting the value of the padding and font size properties to make the pills smaller?

    @media only screen and (max-width: 479px) {

  /* Add your Mobile Styles here */
  #top .av-pill-tabs .av-section-tab-title {
    margin-right: 10px;
    padding: 0 !important;
  }

  .av-pill-tabs .av-inner-tab-title {
    color: #FFFFFF;
    font-size: 0.7em;
    margin-bottom: 0px !important;
    line-height: .5em;
    padding: 4px !important;
  }
}

    Best regards,
    Ismael

    April 4, 2024 at 3:14 am #1439138
    Renard

    Hi Ismael,

    Padding for the pills worked! Appreciate your help.

    Can you also please advise how can I align the contents of the catalogue to center?

    Kindly navigate to the link provided in the Private Content and view it in mobile.

    Thanks

    April 4, 2024 at 7:29 am #1439157
    Ismael

    Hi,

    You can align the content to the center by adjusting the padding of the catalogue and column container.

    @media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .av-catalogue-container.av-97hmxr-301bb1c6948008b057bb3f52570c7b0a {
    padding: 0;
  }

  .flex_column.av-9f5qr3-599781cc99ea2052a986d82c23483122 {
    padding: 0;
  }
}

    If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

    Thanks!

    Best regards,
    Ismael

    April 4, 2024 at 8:01 am #1439161
    Renard

    Hello Ismael,

    I appreciate you sharing the CSS code for aligning the contents of the catalogue.

    I tried to upload the code into Quick CSS, but unfortunately, there hasn’t been any visible change.

    Also, I’ll remember to start a new thread if I have any further questions in the future.

    Thanks

    April 4, 2024 at 8:08 am #1439162
    Renard
    This reply has been marked as private.
    April 4, 2024 at 9:58 am #1439179
    Ismael

    Hi,

    We adjusted the css code a bit. Please add it at the very bottom of the stylesheet and make sure to purge the cache and toggle minification before reviewing the site.

    @media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .av-catalogue-container.av-97hmxr-301bb1c6948008b057bb3f52570c7b0a {
    padding: 0 !important;
  }

  .flex_column.av-9f5qr3-599781cc99ea2052a986d82c23483122 {
    padding: 0 !important;
  }
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.