Tagged: ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • July 29, 2020 at 11:32 pm #1234022
    LaBruzziMediaCraft

    Hello! I have looked all over and I have not found any code that works to do what I need. I am referring to the documentation here: https://kriesi.at/documentation/enfold/fullwidth-easy-slider/ but the code does not seem to do what it is supposed to. I want to replicate the look of the sample under “Slider caption above title”, but that code doesn’t seem to work for me.

    My website I am working on is currently in “coming soon mode”, so please log in with the provided credentials to see what I have going on so far in the General Styling CSS.

    July 30, 2020 at 7:55 pm #1234206
    LaBruzziMediaCraft

    OK… So I’ve solved one problem. I was able to fix the code so that the order is correct, but now I need help making everything centered and not so wide. I want everything to center vertically and horizontally. Then I want the caption content to not go as wide as the page, but to limit it to being more narrowly centered over the title. Then I also want the buttons to be more narrow as well (not stretch the full width). Any help is appreciated. Thanks!

    Here is my current code:

    #top .avia-fullwidth-slider .slideshow_align_caption {
    display: flex!important;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap:wrap;

    }
    #top .avia-fullwidth-slider .avia-caption-title,
    #top .avia-fullwidth-slider .avia-caption-content {
    position: relative;
    }

    #top .avia-fullwidth-slider .avia-caption-title {
    order:2;
    }
    #top .avia-fullwidth-slider .avia-caption-content {
    padding: 0;
    order:1;
    }

    #top .avia-fullwidth-slider .avia-slideshow-button {
    order:3;
    }

    August 2, 2020 at 4:01 am #1234541
    Rikard

    Hi,

    Thanks for the update. Please try the following in Quick CSS under Enfold->General Styling:

    .caption_bottom .slideshow_caption .slideshow_inner_caption {
    position: initial;
}

.avia-caption-content a.avia-button {
    display: table;
    margin: 0 auto;
    width: 50%;
}

.avia-caption-content p, h1.avia-caption-title {
    text-align: center;
}

    Best regards,
    Rikard

    August 7, 2020 at 9:18 pm #1236125
    LaBruzziMediaCraft

    Thank you for this. Unfortunately, it doesn’t seem to be working as expected. I had a happy accident where I changed something in the footer and suddenly new changes showed up here in the slider. I now have the text and button width the way I want it and the text is centered but displayed to the left. The buttons are displayed to the left as well. The title is centered horizontally. And I need everything centered vertically in the image slider.

    August 8, 2020 at 1:47 am #1236157
    LaBruzziMediaCraft

    Here is all the code that is currently being used:

    #top #header .av-main-nav > li {
    padding-left: 20px;
    padding-right: 20px;
    }

    #top .avia-fullwidth-slider .slideshow_align_caption {
    display: flex!important;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: wrap;
    }

    #top .avia-fullwidth-slider .avia-caption-title,
    #top .avia-fullwidth-slider .avia-caption-content {
    position: relative;
    text-align: center;
    }

    #top .avia-fullwidth-slider .avia-caption-title {
    order: 2;
    }

    #top .avia-fullwidth-slider .avia-caption-content {
    order: 1;
    width: 50%;
    }

    #top .avia-fullwidth-slider .avia-slideshow-button {
    order:3;
    width: 50%;
    }

    August 9, 2020 at 5:21 am #1236270
    Rikard

    Hi,

    Thanks for the update. I can’t see the CSS I gave you in Quick CSS, could you add it back please? Also, I’m not sure why you are using a caching plugin on a site which is not live, I would advise that you clear the cache from it and leave it deactivated until the site is live.

    Best regards,
    Rikard

    August 11, 2020 at 4:21 am #1236554
    LaBruzziMediaCraft

    I deactivated the plugin as you suggested. I also added your code back in. I still don’t see the changes I am looking for.

    August 12, 2020 at 5:18 am #1236817
    Rikard

    Hi,

    I added this to Quick CSS, and everything is centered now:

    #top .avia-fullwidth-slider .avia-caption-content {
    display: table;
    margin: 0 auto;
}

#top .avia-fullwidth-slider .avia-slideshow-button {
    display: table;
    margin: 0 auto;
    margin-bottom: 20px;
}

    Best regards,
    Rikard

    August 15, 2020 at 12:16 am #1237960
    LaBruzziMediaCraft

    Thank you for your help. It’s still not perfect, but very close. I think I need to hire a developer to get it to also behave on mobile. Thanks for getting me to a point where I can show them what I want!

    August 17, 2020 at 6:22 am #1238360
    Rikard

    Hi,

    Thanks for the update. Please let us know if you should need any further help on the topic.

    Best regards,
    Rikard

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