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.

I saved it again within the code of the actual WP page in the “img” info with the code style=”box-shadow:none;” and it worked this time. Maybe that will help someone else having this same issue. What an ugly thing to add to this theme. I hope they remove it in future versions.

So, for newbies, it looks like img class=”alignleft wp-image-168″ style=”border: none;” src= etc.

Same here. Tried everything I can think of. It’s frustrating. I first had to work around the video issue by adding a GIF for mobile and now it is super tall and awkward looking. Any coding fixes I try make it look shorter on desktop and taller on mobile. Still seeking a solution. I’ve asked my coding guru, so if it can be fixed, he’ll know.

This worked for me. Place the code in the Custom CSS within the Appearance/Customize toolbar. I played around with the percentages until it looked the way I wanted. I got the code from this page, if you want to go view what the full thing says (https://jimmyknoll.com/restyle-twenty-seventeen-theme-using-css/):

.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: 100% !important;
display: block !important;
position: relative !important;
}

#wp-custom-header {
height: 50% !important;
}

.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media, .admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media, .admin-bar.home.blog.has-header-image .custom-header-media, .admin-bar.home.blog.has-header-video .custom-header-media {
height: calc(71vh – 32px) !important;
}`

I had to do a lot of research on this for myself, so just sharing what I learned. Apparently video will not work with this theme on mobile. You have a couple of options. You could upload an image that will pull up when the video doesn’t display. Or, you can turn your video into a gif, upload as an image and it will load on both mobile and desktop.

That may or may not work for your needs. Another option is to make the header smaller and put the video directly under it so it is still near the top of the page but not within the header and it should play.

I find this aspect of the theme extremely limiting, but I couldn’t find an easy workaround. A coding guru may be able to figure it out, but those of us with just a little knowledge of coding find it impossible. Hope that helps you.

I was having this issue and tried EVERY tutorial, forum post and possible solution. I know a little coding, but just enough to get myself in trouble with my tweaks. I was at my wit’s end, when I ran a debug that said my file size and post size were mismatched. I’d never seen that error and actually they are supposed to be a little different.

However, it led me to a tutorial on how to fix that issue which had a step in it to check your .htaccess file. Well, there was a TON of stuff in that file. I just deleted it altogether and suddenly my images reappeared and are working just fine. I can upload things to my media library again.

Try cleaning up your .htaccess and see if it helps. Worked for me anyway. I think I’d tried a plugin during a redesign and then deleted it and it changed my back-end files.

• This reply was modified 4 years, 6 months ago by lorisoard.