Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 6, 2022 at 4:24 pm #1334570
    Grobi

    Hi Enfold-Team,
    I use the full screen slider and would like to use a graphic instead of a heading. This initially works as intended.

    However, I don’t understand the type of display: if I display the inserted graphic in the middle, it is displayed about 1200 pixels wide (original is 900px wide), if I align the graphic to the right or left it becomes smaller here – only about 460px.

    The display also does not react when I use of a class.
    How can I control the display of the graphic size – or what am I doing wrong?

    Hope you can help me
    Best regards
    Grobi

    January 7, 2022 at 5:03 am #1334627
    Ismael

    Hey Grobi,

    Thank you for the inquiry.

    Did you set the Styling > Slideshow Settings > Stretch image to fit the slideshow size settings to the first option? Please note that by default, the slider images inherit the width of the browser viewport. If you want to display the actual size of the slider image and align it to the center, you have to select the second option in the settings above.

    Best regards,
    Ismael

    January 14, 2022 at 11:53 am #1335556
    Grobi

    Hi Ismael,
    thanks for your answer.
    I fear that I may have misled you with my bad description (or I don’t quite understand your explanation.).

    I do not mean the background pictures of my full size slider. But I use title-grafics (jpgs) instead of the captions.
    At the end I am looking for a possibility to edit the display-size of those jpgs.
    I want to align my jpgs to the right, but unfortunately the displayed size is to small, and I do not find a way to increase.
    Can you give me hint?

    Thanks and best regards
    Grobi

    January 15, 2022 at 10:17 pm #1335721
    Mike

    Hi,
    Thank you for your patience, I believe the issue is that when the caption is to the right the caption container is only 42% width, so try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field to increase the container width:

    #top.home #main .slideshow_caption {
    width: 80%;
}

    feel free to adjust the width to suit and after applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    January 17, 2022 at 1:43 pm #1335866
    Grobi

    Hi Mike,
    perfect, that is the solution for my problem. Thank you very much.

    One additional question: for this slider I want to set links via buttons. Is there a possibility to style the buttons – first of all the font style?
    Thanks again and best regards
    Grobi

    January 17, 2022 at 2:01 pm #1335875
    Mike

    Hi,
    Glad to hear this helped, you can style the buttons, for example to change the font-size try this css:

    #top #main .avia-slideshow-button {
	font-size: 20px;
}

    you could also use this to adjust the font family to any that you have installed, if you need further help adjusting add some test text to your page using the font family you want the buttons to be for us to see.

    Best regards,
    Mike

    January 22, 2022 at 1:31 pm #1336647
    Grobi

    Hi Mike,
    thank you very much for this.
    Now, as I’m able to manage the slider for the desktop-version I am working on the responsive design.
    Is there a possibility to change the button size on responsive design (i want to make it smaller) and/or is it possible to change the buttons position to the slider caption? I mean the gap between caption and button which I want to change smaller.

    To get a hint here, this would be very fine!!!
    Best regards
    Grobi

    January 23, 2022 at 7:29 pm #1336769
    Mike

    Hi,
    Changing the font of the button text also changing the size of the button, so for two different button sizes you could try this:

    @media only screen and (max-width: 767px) { 
#top #main .avia-slideshow-button {
	font-size: 12px;
}
}
@media only screen and (min-width: 768px) { 
#top #main .avia-slideshow-button {
	font-size: 20px;
}
}

    To have the button closer to the image in the caption H2, try this css:

    @media only screen and (max-width: 479px) {
.responsive #top #main .slideshow_caption h2 {
    font-size: 0px !important;
    line-height: 0px;
    margin-bottom: 0px;
}
.responsive #top #main .slideshow_align_caption br {
	display: none;
}
#top #main .avia-slideshow-button {
	margin-top: 0px;
}
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.