Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • #869148

    Hi guys,
    Hope you all are doing well

    1- Could you please take a look at this website (I put the link in private box)
    As you may see, the “tab section” is not responsive in Mobile Screens.
    How may we fix it?

    2- And just a little question: the orange logo at the upper left of the website gets under the menu sign in mobile screens. How may we fix that as well and keep that logo still at the left side on any screen size?

    Kind regards,
    Sadegh

    #870099

    Hey Sadegh,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    @media only screen and (max-width: 767px) {
      .responsive #top #header_main > .container .main_menu .av-main-nav > li > a {
        min-width: 0;
        padding: 20px 0 0 20px;
      }
      .responsive .logo a {
        float: left;
      }
      .responsive #top  div .logo {
        float: left;
      }
    }
    

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #870788

    Hey Victoria,

    Thanks for your reply, it fixed the issue with logo.
    But the other issue (Tab Section) is still remains.
    I captured an image in private box.

    Thanks,
    Sadegh

    #872271

    Hi,

    Actually that is the way we generate it.
    We are following that structure for the responsive.

    If you need to change it or make it a different way, you need consider hire someone who will re-write the grid for you.

    Best regards,
    Basilis

    #872416

    Hi
    No, it is not the way you generate it in English (mobile mode).

    > This is what Tab Section looks like in English mobile mode:
    .

    > This is what it looks like in RTL mobile mode (link in private box):
    .

    So, please let me know how could it be fixed.
    Thanks,
    Sadegh

    #873504

    Hi,

    Looks like you modified the tab section title quite a bit. Please apply the modifications only on desktop by using a few css media queries.

    @media only screen and (min-width: 768px) {
      /* Add your Desktop Styles here */
    
    }
    

    Best regards,
    Ismael

    #873573

    Hi,
    No we didn’t modify it.
    The code you gave us didn’t work as well

    #873781

    Hi Sadegh,

    I got a 404 on the link. Did you move the website?
    Best regards,
    Victoria

    #874055

    Hi Victora

    Strange, the website is live.
    Could you please check that again?

    #874449

    Hi,

    No we didn’t modify it.

    The tab section title was modified. Please look at the default styling of the tab title.

    // https://kriesi.at/themes/enfold-2017/

    The tab section is located at the very bottom of the page.

    Best regards,
    Ismael

    #874602

    Hi,
    I still don’t get it.
    I already saw your tab section in enfold-2017, we want an exact style for both desktop and mobile view (as I already told you about that Link)
    Let me know how could we get that style for both desktop and mobile. (And please keep in mind that your tab section seems to have problem with RTL mode.)

    Let me know please
    Regards

    • This reply was modified 6 years, 12 months ago by Sadegh.
    #874723

    Hi Sadegh,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    @media only screen and (max-width: 479px) {
      #av-tab-section-1 .av-tab-section-outer-container .av-tab-section-tab-title-container.avia-tab-title-padding-default {
        min-width: auto !important;
        left: 0 !important;
      }
    }
    

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #876969

    Hi Victoria,

    Thanks for the code, I put them in both quick css and custom.css, but the issue is still exists.
    In mobile mode, we can not see the tab section like the one you have in your demo

    Regards

    #877933

    Hi,

    Please look for this code.

      #top .av-section-tab-title {
        color: #777;
        background: #fff;
        margin: 0 10px;
        border-radius: 4px;
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
      }

    Replace it with:

    @media only screen and (min-width: 768px) {
      /* Add your Desktop Styles here */
      #top .av-section-tab-title {
        color: #777;
        background: #fff;
        margin: 0 10px;
        border-radius: 4px;
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
      }
    }

    And then remove the following css code.

    @media only screen and (max-width: 479px) {
      #av-tab-section-1 .av-tab-section-outer-container .av-tab-section-tab-title-container.avia-tab-title-padding-default {
        min-width: auto !important;
        left: 0 !important;
      }
    }

    It’s going to revert the tab section title back to the default style on mobile view.

    Best regards,
    Ismael

    #877990

    Hi,
    I did exactly what you said, but the issue is still exists.
    You may check yourself:

    .

    Regards

    #878398

    Hi,

    Please post the login details in the private field. We would like to check the css modifications.

    Best regards,
    Ismael

    #878417

    Hi,
    Please find the credentials in private box.

    Regards,
    Sadegh

    #879457

    Hi,

    Thank you for the info.

    We modified the css codes a bit and then added the following code.

    .rtl .av-tab-section-tab-title-container.avia-tab-title-padding-default {
        margin-right: -10em !important;
    }

    Best regards,
    Ismael

    #879524

    Hi Ismael,
    Thanks for your kind help.
    The issue is resolved.

    (You may now close the thread please)

    Regards,
    Sadegh

    #879790

    Hi,

    Glad to hear that. Thanks for using Enfold :)

    Best regards,
    Nikko

Viewing 20 posts - 1 through 20 (of 20 total)
  • The topic ‘Tab Section is not Responsive’ is closed to new replies.