Get rid of gradient and spacing on mobile only

  • Resolved lorisoard

    (@lorisoard)


    1 year, 5 months ago

    Hi all,

    I’ve searched and tried various things to get this issue fixed. I’ve used Twenty Seventeen on a number of sites, so kind of surprised it is doing this. I know it might be in the CSS somewhere but can’t figure out where.

    Anyway, this is what it is doing:

    On desktop, I love the header and menu (revamping the whole site so this is my first thing I’m working on). Unfortunately, on mobile, I was able to make the image responsive by adding some custom CSS but now there is a huge blank (purple) area between my header and my menu. I fixed it on desktop but can’t quite figure out the coding for mobile.

    Here is what I have in my custom CSS. If you pull the page up on mobile, you’ll see what I mean and the gradient is making it look wonky by covering most of the image. I can lose the gradient but I really like the way it looks so I hate to. I also do have Options Twenty Seventeen installed.

    Thanks for any input!

    .has-header-image .custom-header-media img, .has-header-video .custom-header-media video, .has-header-video .custom-header-media iframe, .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
height: 66% !important;
object-fit: fill !important;
width: 100%;
max-height: 90% !important;
display: block !important;
position: relative !important;
}

@media screen and (max-width: 500px) {
.custom-header-media {
height: 35vw !important;
}
    • This topic was modified 1 year, 5 months ago by Alvaro Gómez. Reason: formatting

    The page I need help with: [log in to see the link]

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

  • Can I ask, what is the goal of the CSS you added? Also, what should it look like on mobile?

    If you could provide a little bit more details, we might be able to find an alternative approach, one that does not look odd on mobile.

    Thread Starter lorisoard

    (@lorisoard)

    The code made the header image responsive, because it was zooming in strangely before, which I’ve seen others mention with this theme. I was able to fix the extra space by losing the gradient. However, now my header on pages other than Home is too small and not showing, so I’m hunting for a fix for that. I have a love/hate relationship with this particular theme. LOL

    I’ll be sure to include screenshots next time I need help.

    Hi @lorisoard it looks like the issue has been marked as resolved, did you manage to resolve this issue? Additionally, the header seems to be the same size on pages as shown in the video below. Maybe I am missing something, please feel free to share a link and screenshot of the affected pages.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Get rid of gradient and spacing on mobile only’ is closed to new replies.