Goram theme: Change the height of the distinguished image

  • Unknown's avatar
    guamatur · Member ·

    Good morning!

    I need change the height of the distinguised image from the home and another pages and I can’t find where is “height” in the code css.
    Can you help me about that?

    Thanks!

    My blog is: https://viajesdenegociosguamatur.com

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

  • Unknown's avatar
    guamatur · Member ·

    Sorry! featured image no distinguised image

  • Unknown's avatar
    designsimply · Member ·

    The Goran theme uses a CSS3 property called “background-size” to display the featured images. That means that they are not inserted as images in the traditional sense and the images will get cut and moved around differently depending on the width of the screen. Because of this, a lot of different spacing is adjusted by using various padding for different break points with media queries. To understand how it works and how images will be adjusted if you start changing the CSS for it, you really should have a good background understanding of both the background-size element and media queries. What I can do is help you get started, give you some background info, and then point you in the right direction with a few examples so you can make adjustments on your own from there.

    Here is some information about the background-size element. Pay particular attention to the “cover” value because that is what Goran uses on featured images:
    http://davidwalsh.name/background-size
    https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images

    This demo will give you a good idea of how it works. To see the full effect, look at the different images in all different widths by making your browser window smaller and larger as you view the demo:
    http://davidwalsh.name/demo/background-size.html

    Here is some information about media queries:
    http://en.support.wordpress.com/custom-design/custom-css-media-queries/

    If you look at the theme’s CSS, you will see how there are tons of different rules for different padding sizes in the @media sections. Those are what control the size of the featured images in Goran because adjusting the sizes of the container elements effectively affects how “background-size:cover” works.

    Here is an example that sets the padding to 0 for the featured image on the home page so you can get an idea of how adjusting the padding affects the design:

    @media screen and (min-width: 1230px) {
	body.hero-image .hero.with-featured-image,
	body[class*="front-page"] .hero {
		padding: 0;
	}
}

    The @media part means that the rule affects browser widths of 1230px or larger, which means the example above will only work for large screen sizes.

    There is a lot to learn here! Adjusting featured images in the Goran theme is not a small task.

  • The topic ‘Goram theme: Change the height of the distinguished image’ is closed to new replies.