Make picture smaller

• 

  mycontroller · Member · May 19, 2015 at 2:14 pm

  • Copy link
  • Add topic to favorites

  Hi,

  I am new with WordPress and CSS. I want to make the picture under “Redovisningsbyrå med kunden i fokus” a little bit smaller or have the text a little bit up on the picture. Can you help me how to do?

  thanks!

  The blog I need help with is: (visible only to logged in users)

• 

  staff-jeanpierreac · Staff · May 19, 2015 at 2:58 pm

  • Copy link

  The problem is the title “Riksbanken lämnar reporäntan oförändrad” takes two lines so the image even if it is the same size as the others start a little bit downwards. You can limit the height of your thumbnail (the pic) in two ways.

  First: Cut a stripe in the down side to make the text start at the same point as the other column.

  #post-589 .entry-header .entry-thumb {
      height: 125px;
      overflow: hidden;
  }

  Second: Resize image.

  #post-589 .entry-header .entry-thumb .thumb-link .wp-post-link {
      height: 125px;
      width: 188px;
  }

  I hope this helps you.

• 

  mycontroller · Member · May 19, 2015 at 3:28 pm

  • Copy link

  Hi again,

  Thank you.
  That is not the picture I mean. I mean the first picture, the big one, with text on it that starts with “Redovisning med kunden i fokus”. On the picture it is a city.

  I hope you see what I mean. Sorry for the misunderstanding!

• 

  staff-jeanpierreac · Staff · May 19, 2015 at 8:34 pm

  • Copy link

  That’s ok, sorry for that!
  This image is on background of a div called #hero. This #hero area has a height which is the addition of your text height plus two paddings (top and bottom) of 140px each. If you want your image smaller, you can modify these two parameters with values from 0 to 140px.

  #hero.has-background {
    padding-top: 50px;
    padding-bottom: 10px;
  }

  Take into account your image in background will be horizontal adjusted to fit the screen width and vertical centered, but you could modify that. For instance, you can adjust your background image size to be 40% of browser window width adding this css code:

  #hero.has-background {
    -webkit-background-size: 40%;
    -moz-background-size: 40%;
    -o-background-size: 40%;
    background-size: 40%;
  }

  If you would like to adjust any other background image parameter, just ask and I will be glad to try to help you.