Responsive homepage image

  • Hey, how can I make the homepage header image responsive? Right now it gets cropped on smaller screens. I would like it to resize to the width of the screen.

    And where can I change the Home Page Title and Subtitle fonts? Thanks a million!

Viewing 4 replies - 1 through 4 (of 4 total)
  • hannah

    (@hannahritner)

    Hi,
    Can you post a link?
    The title pulls from your H1 Settings (Theme Options > Typography) and the subtitle you can change with this css:

    .titleclass .subtitle {
  font-family: sans-seirf;
  font-size: 20px;
}

    Hannah

    Thread Starter lauratraveler

    (@lauratraveler)

    Hi Hannah,
    It’s https://www.travelersuniverse.com/
    Thanks!

    Hey,
    Your request to have the background stay the width of the screen will cause there to be blank areas around the area. Consider that the height is set by the content not by your background image size. So the height will always stay the same if you force the backgrounds width two shrink so it’s always visible you will either have the height shrink too leaving a blank area in the background or you will have to stretch the image out of it’s ratio to fill height and width.

    see what I mean by adding these things one at a time in your custom css:

    1.

    .home-title-class {
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

    2.

    .home-title-class {
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
}

    Hope that helps explain how backgrounds work.

    Kadence Themes

    Thread Starter lauratraveler

    (@lauratraveler)

    Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Responsive homepage image’ is closed to new replies.