Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • October 26, 2017 at 9:33 am #869148
    Sadegh

    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

    October 29, 2017 at 4:38 pm #870099
    Victoria

    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

    October 31, 2017 at 9:45 am #870788
    Sadegh

    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

    November 3, 2017 at 8:13 pm #872271
    Basilis

    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

    November 4, 2017 at 7:52 am #872416
    Sadegh

    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

    November 7, 2017 at 4:14 am #873504
    Ismael

    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

    November 7, 2017 at 8:13 am #873573
    Sadegh

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

    November 7, 2017 at 4:20 pm #873781
    Victoria

    Hi Sadegh,

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

    November 8, 2017 at 7:14 am #874055
    Sadegh

    Hi Victora

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

    November 9, 2017 at 6:45 am #874449
    Ismael

    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

    November 9, 2017 at 11:42 am #874602
    Sadegh

    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 7 years, 1 month ago by Sadegh.
    November 9, 2017 at 3:44 pm #874723
    Victoria

    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

    November 15, 2017 at 9:21 am #876969
    Sadegh

    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

    November 17, 2017 at 5:44 am #877933
    Ismael

    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

    November 17, 2017 at 9:52 am #877990
    Sadegh

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

    .

    Regards

    November 18, 2017 at 8:18 am #878398
    Ismael

    Hi,

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

    Best regards,
    Ismael

    November 18, 2017 at 8:56 am #878417
    Sadegh

    Hi,
    Please find the credentials in private box.

    Regards,
    Sadegh

    November 21, 2017 at 3:11 am #879457
    Ismael

    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

    November 21, 2017 at 7:04 am #879524
    Sadegh

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

    (You may now close the thread please)

    Regards,
    Sadegh

    November 21, 2017 at 4:06 pm #879790
    Nikko

    Hi,

    Glad to hear that. Thanks for using Enfold :)

    Best regards,
    Nikko

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