WordPress.org

Ready to get started?Download WordPress

Forums

Simple Catch
[resolved] How to reduce the space between the image and the text? (21 posts)

  1. flashlula
    Member
    Posted 1 year ago #

    How to reduce the space between the image and the text when displaying articles in a category?

    Look at the picture to better understand:
    http://tapetevoador.pt/pt/wp-content/uploads/2013/06/how_to_reduce_this_space.jpg

    I think it is somewhere in this section of the style.css file, but I still do not find out where:

    /* =Content
    ----------------------------------------------- */
    #main {
    padding-top:10px;
    }
    #main #content .post {
    padding-bottom:6px;
    }
    #main #content .post h1,
    #main #content .post h2.entry-title
    {
    font-size: 20px;
    line-height:20px;
    padding-bottom:6px;
    }
    #main #content .post-img a {
    width:130px;
    height:130px;
    overflow:hidden;
    display:block;
    padding:5px;
    background-color:#fff;
    border:1px solid #bbb;
    }

    (...)

    Thank's ;)

  2. wp-21
    Member
    Posted 1 year ago #

    Hi, it would be better if you post link to your site.
    However from the above code it seems it might be due to width you have set on the img element of the post.
    But not sure from the code, it would be best known if the link of the site is posted

  3. flashlula
    Member
    Posted 1 year ago #

    Hi wp-21!
    Thanks for your reply.
    For now, the site can not be placed online :( ...
    but the code is the style.css that comes with the simple-catch theme, so ...
    What do you mean with "width you have set on the img element of the post."?

  4. wp-21
    Member
    Posted 1 year ago #

    i meant this code

    #main #content .post-img a {
    width:130px;
    height:130px;
    overflow:hidden;
    display:block;
    padding:5px;
    background-color:#fff;
    border:1px solid #bbb;
    }

    the width that you have set above.You can use pastebin to post your html and css for the mentioned page.It would be helpful.
    without the codde it would be difficult to sort out the problem

  5. flashlula
    Member
    Posted 1 year ago #

    Sorry but English is not my language :) and some things I do not understand.
    the width:130px is for the image and it's working ... I do not see how it influences the rest.
    I'll put the site online for a few moments ... if you can help :)
    http://tapetevoador.pt/pt

    ... and the problem is in those cases:
    http://tapetevoador.pt/pt/?cat=5

  6. wp-21
    Member
    Posted 1 year ago #

    ok
    i'll check it.

  7. wp-21
    Member
    Posted 1 year ago #

    yeah i checked,...and found out the problem is the width set on the container divs on the line 62 and 56
    you have to increase the width for the line 62 and decrease the width for the line 56 like this:

    line 56 becomes this:

    div.col3 {
        width: 145px;
    }

    line 62 becomes this:

    div.col5 {
        width: 571px;
    }
  8. flashlula
    Member
    Posted 1 year ago #

    Ok!!!
    Thank you for your quick and helpful help ;)
    I will try to solve the problem.
    Thanks wp-21!

  9. wp-21
    Member
    Posted 1 year ago #

    Cheers..:)

  10. flashlula
    Member
    Posted 1 year ago #

    Hello wp-21!
    It seems that I still have a problem :)
    I can not find the code that you spoke ... in what file is?
    Sorry, I'm a newbie :)

  11. wp-21
    Member
    Posted 1 year ago #

    it was in a css file named 978.css

  12. flashlula
    Member
    Posted 1 year ago #

    Yes, i've just found it!
    :)

  13. flashlula
    Member
    Posted 1 year ago #

    My 978.css file comes with:

    div.col3 {
    width: 222px;
    }
    ...
    div.col5 {
    width: 390px;

    ... not with: 145 and 571?
    How is that?

  14. wp-21
    Member
    Posted 1 year ago #

    145 and 571 are the values which should be there.

  15. flashlula
    Member
    Posted 1 year ago #

    Of course :)
    Sorry about that ... and, once again thnaks for your help.
    Cheers!! ;)

  16. flashlula
    Member
    Posted 1 year ago #

    Resolved!!!

  17. wp-21
    Member
    Posted 1 year ago #

    Cheers mate.:).!!

  18. AynCG
    Member
    Posted 1 year ago #

    Hi there. I have a similar problem that just ocurred after some dev work. The first line of every post is appearing in a wanky position on top of the first photo to the right. Here is an example of the error: http://wondermintkids.com/how-to-make-a-quick-easy-dairy-free-slacker-shake/

    The only way I have been able to get the line from disappearing from above the photo is by pasting in this code: above the text in the editor:  

    However, that solves one problem but leaves a big pad of white space between the text and photo, which I cannot seem to get rid of. Here is an example of that.
    http://wondermintkids.com/raspberry-nutella-wafflewich/

    Thanks in advance.

  19. wp-21
    Member
    Posted 1 year ago #

    Hi AynCG, Just looked at the first link and found out the problem.
    Some text is appearing above the photo because the div containing the photo is float to left in css and the text following the photo is contained in p tag which is not cleared, which is causiing the problem.

    Just clear the float by placing a clearing div as:

    <div style="clear:both"></div>

    after the div containig the photo and all will be good.

  20. AynCG
    Member
    Posted 1 year ago #

    Thanks so much. That does seem to work. So does putting this code in:  

    BUT, I still have the big pad of white space after the photo, before the text. Looks like it's about 5 spaces/lines of open space.

    Or, am I placing the code you suggested in the wrong place?

    Thanks again. http://www.wondermintkids.com

  21. wp-21
    Member
    Posted 1 year ago #

    Hi, the space that you are seeing is appearing due to bottom margin applied to p tag in your css file.like this somewhere around 161 line not sure though abt the location.

    p{
      0 0 1.5em 0
    }

    You need to remove this margin to remove the space.

    Cheers..:)..

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic