Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • May 17, 2017 at 6:21 am #794654
    mikkijack

    It’s a couple of things going on.
    I’m trying to get the color padding in my 1/3 module links under the main slider on my front page.
    The padding for the wording is not working.
    This is what I want.

    Right now, the color is covering the entire picture.

    Also, I want the same 1/3 modules to have 200px height and 340 width.
    I’ve tried to put this in, but it’s not changing.

    height: 200px;
width: 340px;

    How can I fix these two things?

    May 17, 2017 at 8:40 am #794699
    Rikard

    Hey mikkijack,

    Please try the following in Quick CSS under Enfold->General Styling:

    
.av-image-caption-overlay-center p {
    background-color: rgba(255,255,255, 0.5) !important;
    width: auto !important;
}

    Best regards,
    Rikard

    May 17, 2017 at 8:48 am #794702
    mikkijack

    Hi Rikard,
    I added that, and it didn’t change anything.

    May 17, 2017 at 6:17 pm #795015
    Yigit

    Hi,

    Please try using following code and adjust the values as needed

    .av-caption-image-overlay-bg {
    height: 50px;
    width: 200px;
    top: 40%;
    left: 20%;
}

    Best regards,
    Yigit

    May 17, 2017 at 6:37 pm #795024
    mikkijack

    Hi Yigit,
    That didn’t work either.

    May 17, 2017 at 6:47 pm #795031
    Yigit

    Hi,

    You had multiple unclosed media queries in Style.css file of your child theme. I closed them and it helped. Please flush browser cache, refresh your page a few times and review your website

    Best regards,
    Yigit

    May 17, 2017 at 9:28 pm #795092
    mikkijack

    Yigit, thank you SOOOOOO much for realizing and fixing that. I don’t know how I did that.

    I used your code and it did work, but it wouldn’t center automatically on all devices.

    This is what I used instead…

    .av-image-caption-overlay-center {
    color: #171717;
    line-height: 1.5em;
    padding: 8px 12px 8px 13px;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: #ffffff;
    display: inline-block;
    max-width: 60%;
    font-weight: 500;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.05);
    vertical-align:middle;
    margin-top: 28%
}

    That worked how I wanted it too. But, thank you all for guiding me in the right direction.

    Also, what about the second part of the post?

    How can I make them all 200px height and 340 width?

    I’m using inspect, but can’t find the class to edit it.

    Thank you.

    May 18, 2017 at 3:35 am #795209
    Mike

    Hi,
    Try this code in the General Styling > Quick CSS field:

    .avia-image-container .avia-image-container-inner .avia_image {
    width: 340px !important; 
    height: 200px !important; 
}

    Best regards,
    Mike

    May 18, 2017 at 10:47 am #795773
    mikkijack

    Hi Mike! Thank you so much. It’s great now!

    May 18, 2017 at 3:25 pm #795942
    Yigit

    Hi,

    You are welcome! :)

    For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
    And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
    For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Padding for words on image module.’ is closed to new replies.