Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 14, 2023 at 12:25 pm #1397903
    DianaLoola73

    Dear support team

    for the tab section element I have a problem with the display on the mobile phone: https://gabriele-redenz.de/support/mobile-tab.jpg

    The section can be reached via the following link: https://gabriele-redenz.de/home-2/#seminar

    Now the background of the forward/back arrows overlaps the text on the mobile version (see screenshot: https://gabriele-redenz.de/support/mobile-tab.jpg )

    Now I tried to make the background for the mobile version transparent with the following CSS script:
    @media only screen and (min-width: 400px) and (max-width: 989px) {
    #top .av-tabsection-arrow > a.next-slide {
    background-color: rgba(0,0,0,0.01) !important;
    }
    #top .av-tabsection-arrow > a.prev-slide {
    background-color: rgba(0,0,0,0.01) !important;
    }
    }

    But unfortunately it doesn’t work.
    Can you please help me here: how do I achieve a forward/back navigation on the mobile version that does not overlap the text.

    Best regards Diana

    February 15, 2023 at 5:19 am #1398014
    Ismael

    Hey Diana,

    Thank you for the inquiry.

    Now I tried to make the background for the mobile version transparent with the following CSS script

    Please try to add this css rule inside the css media query instead.

    .avia-slideshow-arrows a:before {
    background: rgba(0,0,0,.1);
}

    Make sure to toggle the file compression (Autoptimize) and purge the cache before checking the page.

    Best regards,
    Ismael

    February 15, 2023 at 9:54 am #1398034
    DianaLoola73

    Thanks in advance! With the help of your script I was now able to hide the background color.

    Now it is still the case that the arrow back in the mobile version and the tablet version is on the far left and very difficult to click:
    Tablet view: https://gabriele-redenz.de/support/arrow_tablet.jpeg
    Mobile view: https://gabriele-redenz.de/support/arrow_mobile.jpg

    1.) > How can I place the “back” arrow further to the right (at the same distance from the outer edge as the “forward” arrow)?
    2.) How can I make the arrows thicker and the color #bfdc1e so that they are easier to see?

    Best regards Diana

    February 18, 2023 at 2:29 pm #1398436
    Mike

    Hi,
    Thank you for your patience to move the arrows from the edge equally please try this css:

    @media only screen and (max-width: 1024px) { 
#main .av-tab-above-content .av-tabsection-arrow {
    position: absolute;
    width: 90%;
    top: 30px;
    left: 5%;
}
}

    expected results mobile:
    Enfold_Support_391.jpeg
    expected results tablet:
    Enfold_Support_393.jpeg
    To also change the color and size try adding this css:

    @media only screen and (max-width: 1024px) { 
#main .av-tab-above-content .av-tabsection-arrow {
    position: absolute;
    width: 90%;
    top: 30px;
    left: 5%;
}
#main .avia-slideshow-arrows a:before {
	color: #bfdc1e;
	font-size: 20px;
    font-weight: 900;
}
}

    for this result:
    Enfold_Support_395.jpeg

    Best regards,
    Mike

    February 24, 2023 at 7:41 am #1399085
    DianaLoola73

    Hi Mike,

    thank you for the script.
    After I set the “max-width” to “1100px” it now also works on the tablet landscape format. (max-width: 1100px) Awesome!

    Thanks again and best regards, Diana

    February 24, 2023 at 12:30 pm #1399143
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

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