Viewing 25 posts - 1 through 25 (of 25 total)
  • Author
    Posts
  • August 7, 2019 at 5:04 pm #1125582
    claudipro

    Hello,
    we have on our startpage a fullwidth slide-show header and changed the font size for the mobile version. Unfortunally the arrows on the left and the right side are to big and overlapping the text in the slides. Also the link-buttons are a bit to huge.

    Is it possible to change this?
    Thank you
    Claudia

    August 10, 2019 at 4:13 pm #1126434
    Victoria

    Hey claudipro,

    The website is not loading on my end, are you having issues with it now?

    Best regards,
    Victoria

    August 12, 2019 at 11:38 am #1126777
    claudipro

    Hi Victoria,

    I just logged in and the site is loading.
    Greetings
    Claudia

    August 13, 2019 at 3:32 pm #1127259
    claudipro

    Hi Victoria,

    the website is now life without Verzeichnisschutz and we still have this issue:
    On our startpage is a fullwidth slide-show header unfortunally the arrows on the left and the right side are to big and overlapping the text in the slides. Also the link-buttons are a to huge.
    Is it possible to fix this problem?

    Greetings
    Claudia

    August 16, 2019 at 8:31 am #1128166
    Vinay

    Hi,

    You can hide the arrow by using below code in the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    CSS Snippet:

    
/* CSS - */

 /* Easyslider navigation arrow */
#top .avia-slideshow-arrows a {
 display: none;
}

    Please check the docs for more info.

    Fullwidth Easy Slider

    Best regards,
    Vinay

    August 19, 2019 at 1:40 pm #1128903
    claudipro

    Hi Vinay,

    now the arrows are gone in the desktop version also. I just want to hide the arrows in the mobile Version.
    You have a CSS Snipet for this?

    Thanks a lot
    Claudia

    August 20, 2019 at 4:03 am #1129084
    Rikard

    Hi,

    Please try this instead:

    @media only screen and (max-width: 767px) {
#top .avia-slideshow-arrows a {
 display: none;
}
}

    Best regards,
    Rikard

    August 20, 2019 at 10:49 am #1129183
    claudipro

    Great, thanks a lot this is helping! Maybe you also have a solution to minimize the button in the slideshow for mobile version?
    Greetings Claudia

    August 21, 2019 at 5:49 am #1129425
    Rikard

    Hi Claudia,

    Thanks for the update, what you mean by minimising the buttons? Do you mean that you want to make them smaller on the mobile version?

    Best regards,
    Rikard

    August 21, 2019 at 11:30 am #1129542
    claudipro

    Hi Rikard,
    yes that’s exactly what I mean :) Sorry if I confused you.
    Thanks Claudia

    August 21, 2019 at 5:41 pm #1129659
    Victoria

    Hi Claudia,

    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:990px){    
    #top .avia-slideshow-arrows a {
        width: 40px;
        height: 40px;
    }
    #top .av-control-minimal .avia-slideshow-arrows a:before {
        line-height: 9px;
    }
    #top #wrap_all .avia-slideshow-button,
     #top .avia-button, .html_elegant-blog .more-link, 
     .avia-slideshow-arrows a:before {
         padding: 10px;
     }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    August 22, 2019 at 10:31 am #1129937
    claudipro

    Hi Victoria,

    this code is not working, the buttons on mobile Version have still the same sice and the arrows came back.
    Greetings
    Claudia

    August 22, 2019 at 4:27 pm #1130021
    Victoria

    Hi Claudia,

    I see you’re hiding them for mobile. Do you want to keep it that way? Or do you need more help?

    Best regards,
    Victoria

    August 22, 2019 at 4:35 pm #1130027
    claudipro

    Hi Victoria,

    yes I am hiding the arrows for mobile and I would like to decrease the Button Size. Just to make it, withe the font, a bit smaller that the Button is not overlay the three circles on the buttom of the slider. If possible.
    Thank you
    Claudia

    August 22, 2019 at 9:01 pm #1130112
    Victoria

    Hi Claudia,

    Ok, credentials did not work for me. Could you please update the credentials?

    Best regards,
    Victoria

    August 23, 2019 at 10:55 am #1130283
    claudipro

    Hi Victoria,

    which credentials? The purchase code? I copied in Private Content
    Greetings Claudia

    August 23, 2019 at 1:04 pm #1130339
    Victoria

    Hi Claudia,

    No :) Your WordPress access. I wanted to check the Quick css.

    Best regards,
    Victoria

    August 23, 2019 at 2:16 pm #1130372
    claudipro

    Okay, here we go:

    August 27, 2019 at 4:21 am #1131170
    Ismael

    Hi,

    Thank you for the update.

    We added the following style in the Quick CSS field to adjust the height of the slideshow on mobile view.

    .avia-slideshow-inner {
	min-height: 50vh;
}

.avia-slideshow-inner li, .avia-slide-wrap {
	height: 100%;
}

.avia-slideshow li img {
        width: auto;
        max-width: 9999px;
	object-fit: cover;
	object-position: center center;
}

    Screenshot: https://imgur.com/a/STBjJHn

    Best regards,
    Ismael

    August 27, 2019 at 5:09 pm #1131380
    claudipro

    Wow, that looks good! One Question I have about the size max-width: 9999px isn’t it to big for mobile version and can I change it to another size without destroying the code?

    .avia-slideshow li img {
    width: auto;
    max-width: 9999px; -> which size is this?
    object-fit: cover;
    object-position: center center;
    }

    Thank you very much.
    Claudia

    August 27, 2019 at 5:28 pm #1131400
    Jordan Shannon

    Hi,

    That code is fine for mobile. Essentially it means the image will get no larger than 9999px. So on mobile it will still accomodate and fit the smaller screen.

    Best regards,
    Jordan Shannon

    August 28, 2019 at 12:05 pm #1131571
    claudipro

    Thank you. Claudia

    August 28, 2019 at 4:41 pm #1131647
    Jordan Shannon

    Hi,

    Did you need additional help, or shall we close this topic?

    Best regards,
    Jordan Shannon

    August 29, 2019 at 11:47 am #1131857
    claudipro

    I think you can close the topic. Thank you
    Claudia

    August 29, 2019 at 4:06 pm #1131927
    Jordan Shannon

    Hi,

    If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 25 posts - 1 through 25 (of 25 total)
  • The topic ‘Fullwidth slide-show header on mobile’ is closed to new replies.