-
AuthorPosts
-
October 26, 2017 at 9:33 am #869148
Hi guys,
Hope you all are doing well1- 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,
SadeghOctober 29, 2017 at 4:38 pm #870099Hey 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,
VictoriaOctober 31, 2017 at 9:45 am #870788Hey 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,
SadeghNovember 3, 2017 at 8:13 pm #872271Hi,
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,
BasilisNovember 4, 2017 at 7:52 am #872416Hi
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,
SadeghNovember 7, 2017 at 4:14 am #873504Hi,
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,
IsmaelNovember 7, 2017 at 8:13 am #873573Hi,
No we didn’t modify it.
The code you gave us didn’t work as wellNovember 7, 2017 at 4:20 pm #873781Hi Sadegh,
I got a 404 on the link. Did you move the website?
Best regards,
VictoriaNovember 8, 2017 at 7:14 am #874055Hi Victora
Strange, the website is live.
Could you please check that again?November 9, 2017 at 6:45 am #874449Hi,
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,
IsmaelNovember 9, 2017 at 11:42 am #874602Hi,
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.
November 9, 2017 at 3:44 pm #874723Hi 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,
VictoriaNovember 15, 2017 at 9:21 am #876969Hi 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 demoRegards
November 17, 2017 at 5:44 am #877933Hi,
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,
IsmaelNovember 17, 2017 at 9:52 am #877990Hi,
I did exactly what you said, but the issue is still exists.
You may check yourself:Regards
November 18, 2017 at 8:18 am #878398Hi,
Please post the login details in the private field. We would like to check the css modifications.
Best regards,
IsmaelNovember 18, 2017 at 8:56 am #878417Hi,
Please find the credentials in private box.Regards,
SadeghNovember 21, 2017 at 3:11 am #879457Hi,
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,
IsmaelNovember 21, 2017 at 7:04 am #879524Hi Ismael,
Thanks for your kind help.
The issue is resolved.(You may now close the thread please)
Regards,
SadeghNovember 21, 2017 at 4:06 pm #879790Hi,
Glad to hear that. Thanks for using Enfold :)
Best regards,
Nikko -
AuthorPosts
- The topic ‘Tab Section is not Responsive’ is closed to new replies.