Tagged: , , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • November 10, 2015 at 7:48 pm #533628
    Vicken

    Hi Team Enfold,
    Hope all is well. i am trying to resize the caption section of each image. I want to reduce the padding on desktops and mobile, and center the text. I have tried in so many ways, I even added an ID to the masonry gallery but that wont even show up.

    Here is what I have tried so far:
    figcaption.av-inner-masonry-content.site-background{
    padding: 4px !important;
    text-align: center !important;
    }

    ALSO Tried:
    .av-fixed-size .av-masonry-entry .av-inner-masonry-content {
    text-align: center !important;
    }

    November 11, 2015 at 3:34 pm #534099
    Andy

    Hi Vicken!

    for padding you have been right:

    figcaption.av-inner-masonry-content.site-background {
padding: 4px;
}

    for centering text:

    .av-inner-masonry-content-pos {
position: relative;
left: 30px;
}

    Clear browser cache and har refresh afterwards.

    Best regards,
    Andy

    November 11, 2015 at 5:58 pm #534273
    Vicken

    Hi Andy,
    Nothing is working because the child css is loading before the JS that controls this logic. This matter needs to be addressed, or nothing will work. DO you know which JS call is being loaded so we can move it up in the stack and beneath the child css?

    November 12, 2015 at 8:06 am #534602
    Ismael

    Hi!

    Nothing is working because the child css is loading before the JS that controls this logic.

    I’m not sure what you mean by that but this should resize the masonry image container and prevent the caption from covering it:

    .av-fixed-size .av-masonry-entry .av-inner-masonry-sizer {
    padding-bottom: 160%;
}

    Remove browser cache then reload the page.

    Cheers!
    Ismael

    November 12, 2015 at 7:02 pm #535025
    Vicken

    Hi Ismael,
    I appreciate your attempt to solve the problem but you are wrong. Although this appears to solve the problem, the issue here is you are focused on the image container and not the content portion beneath it. This may seem like a solved problem, bit it is actual creating another issue. The problem is your JS files are loading after the css. The css should be the lowest on the stack for an application like WP. This means even if I make the changes I listed earlier in this chat thread, they are being over written by the JS changes that load after. This is an architectural mistake by the developers. They must move the script ahead of css in this instance.

    Also please see the site page in question that I linked in private above. Your changes maybe working when your in the inspector on chrome but they wont change when added to the child-theme css. This is all due to the css positioning in your stack!

    • This reply was modified 9 years ago by Vicken. Reason: Added more details
    November 16, 2015 at 6:35 pm #536778
    Andy

    Hey!

    JS does not control any styling, so not sure what you are talking about.

    Please clear browser cache + hard refresh. Check on another computer if the code provided is working. If not try to add an !important. Make sure to not use caching plugin or to clear cache of your caching plugin. Ask your host if they are using any kind of caching on your server.

    Cheers!
    Andy

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