Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • April 19, 2015 at 7:02 pm #430912
    Tameez

    Hi,

    I have the following code that creates an outline around the image of the blog grid layout. It also changes the background of the text below.

    .page-id-8128 .avia-content-slider .slide-image {
    background: #FFffff;
    padding: 6px;
    border-style: solid;
    border-width: 1px;
    border-color: f8f8f4;
    }
    .page-id-8128 .avia-content-slider .slide-content {
    padding: 10px;
    background-color: #ffffff;
    }

    The problem is that there is a gap between the image and text and I haven’t been able to get rid of it (unless I make the page and text BG the same color).

    You can see it here: http://www.tameez.com/projects/ at the bottom.

    Any ideas?

    Secondly, I attempted to recreate the same for big preview blog entry but haven’t been able to figure that one out. Any help there will be appreciated. See: http://www.tameez.com. Thanks.

    Regards,

    April 20, 2015 at 7:01 pm #431511
    Yigit

    Hey Tameez!

    Please add following code to Quick CSS as well

    .page-id-8128 .avia-content-slider .slide-image { padding-bottom: 0!important; }

.home .big-preview.single-big {
  background: #FFffff;
  padding: 6px;
  border-style: solid;
  border-width: 1px;
  border-color: f8f8f4;
}

    Best regards,
    Yigit

    April 20, 2015 at 8:44 pm #431588
    Tameez

    Hi Yigit,

    OK. Good news. The second piece of code is fine and it worked.

    The first piece — .page-id-8128 .avia-content-slider .slide-image { padding-bottom: 0!important; } — didn’t do the job. You can see the results on the same page. The box outline disappears.

    One more thing. I looked for the elements unsuccessfully. What’s the class for same border on the blog post page? Thanks.

    Regards,

    April 20, 2015 at 11:27 pm #431661
    Yigit

    Hey!

    Please use following code

    .page-id-8128 .avia-content-slider .slide-image { margin-bottom: 0!important; }

    Your featured images already have borders on your homepage. Please flush browser cache and refresh your page a few times. If that is not what you wanted, please post a screenshot and show the changes you would like to make

    Cheers!
    Yigit

    April 21, 2015 at 8:27 am #431804
    Tameez

    Hi Yigit,

    Yes, that worked. It was the margin. Works great now.

    Now for the border around the images on the blog-post. I can’t figure out the container. Thanks.

    Regards,

    April 21, 2015 at 6:11 pm #432226
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    .single .big-preview.single-big a {
  background: #FFffff;
  padding: 6px;
  border-style: solid;
  border-width: 1px;
  border-color: f8f8f4;
}

    Regards,
    Yigit

    April 21, 2015 at 8:26 pm #432339
    Tameez

    Hi Yigit,

    That worked. Great support and thanks.

    I think you guys need to build a knowledgeable that targets solutions in one place. Just a thought.

    Regards,

    Tameez

    April 21, 2015 at 8:35 pm #432351
    Yigit

    Hi!

    You are welcome, we are always happy to help :)
    We are adding solutions to frequently asked questions to Enfold documentation – http://kriesi.at/documentation/enfold/
    But in my opinion adding all CSS customizations to documentation would make it very complicated. Feel free to ask us if you cannot target a certain element and we will gladly help you!

    Regards,
    Yigit

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Need help with blog grid layout: gap between image and text’ is closed to new replies.