image problems

  • I have been searching for a better theme than the one I’ve been using, and Twenty Seventeen seemed to be great because it should allow better aspect ratio of images. But I’ve had trouble with it cropping the top of an image off on my laptop screen and it distorts the image horizontally on my cell phone. Reading through the forum it seems to be a common issue whether with still shots or videos. Is anyone working on this issue? This theme would be fantastic if this issue were fixed.

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hello, There are several issues in this forum about this, also one of mine. I tried all the offered solutions en nothing works, ego the Problem is even worse now in the smartphones vertical position.

    Hi,
    try to add the following CSS code:

    @media screen and (max-width: 480px) {
    .has-header-image .custom-header-media img,
    .has-header-video .custom-header-media video,
    .has-header-video .custom-header-media iframe {
    position: absolute;
    height: 100%;
    left: 50%;
    max-width: 1000%;
    min-height: 100%;
    min-width: 100%;
    min-width: 100vw;
    width: auto;
    top: 50%;
    padding-bottom: 1px;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    object-fit: cover !important;
    }
    }

    @media screen and (max-width: 480px) {
    .has-header-image.twentyseventeen-front-page .custom-header {
    /*display: table;*/
    height: 265px;
    /*height: 75vh;*/
    height: 55vh;
    /*width: 100%;*/
    }
    }

    This is a solution I’ve found on my own, because I had got the same issue. It’s not ideal, but as far as I’ve tested it, it kind of works. I do hope somebody more familiar than me with CSS will come up with a better fix.

    Thread Starter hyacinthus

    (@hyacinthus)

    thanks, that code seems to help on one of my sites. I’ll go try it on another. Hopefully a new version will fix it eventually.

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