Header image won’t scale

Hello…and thanks for the link to your site (nicely done by the way).

Regarding your header image. This theme will size a photo to fit the viewing area, so there will be some cropping. It’s generally not recommended to have text in a photo because this will get cut off.

One option is to forgo the text but use the image and do the caption on top as text.

The other is a bit of a sacrifice, but what needs to be done is to add some CSS code for mobile views, and then change it back to desktop viewing. The problem is that your image will fit in the view and not be cropped or cut off, but it resizes relative to the width…basically, it stays proportional.

If you want to try that, go to your customizer and to the Additional CSS tab. Copy and paste this code:

.home #header-image img {
    object-fit: scale-down;
    height: auto;
    width: auto;
}
@media (min-width: 992px) {
.home #header-image img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}
}

What the first part does is prevent the image from stretching to fit the view window and fill the space while maintaining the original image size (proportional). The second part is for viewing your site and header image in larger screens that are more than 992px in width.

It’s not overly a nice solution, but it does maintain your full image and allows it to downsize proportionally.

You can also adjust the height of the header for the home page so there’s not so much empty space. You can try adding this as well:

.custom-header #header-caption, 
.has-post-thumbnail #header-caption {
    min-height: 300px;
}

Ultimately, if you can do just the image, that would be better, but I’m assuming you are wanting the nice scriptive font I see there.

Forgot to ask if you know where the theme setup tutorials are for this? If not, you can find them HERE

Yes, this information doesn’t cover my issue. I’ve tried cropping my header image to see if that would help and it doesn’t. According to the free theme is should be mobile responsive but doesn’t seem to be functioning.

Actually, it is responsive to a certain point. What I mean by this is that it’s responsive down to a certain window size but as you get into phones, it has a fixed minimum height to keep enough of the header image in sight.

You can modify the min-height sizing for the different media queries (the min width of the viewing screen) for the various devices from desktop down to phones. I can help you with that if you wish, but it may not be a perfect solution.

Part of the problem is that you have text superimposed on the image, so that adds some restrictions to the responsiveness of this type of layout. What will end up happening is that your text on the photo will move up behind your site title and menu.

By the way, I will be uploading an update to this theme in the next hour or so. Some fixes to the theme, such as centering your site title and logo for the header style you are using.

I was just working with some possible options for you and even though I was able to make it 100% responsive without a fixed min-height, your text in the photo is still moving up behind the site title and menu. I don’t think this type of image graphic is going to work with this kind of header style, mostly because the site title and menu are on “top” of the image.

I removed the text from the image and just entered the plain picture into the header image. Hopefully I can figure out how to put text over it a different way.

Thank you for taking time to provide me with the code. Unfortunately while the first did allow the picture to scale down it is small and leaves a lot of space between the picture and my first sentence so it looks awkward and the site title is so big it blocks the image on the mobile view.

What i’d like to do is have a picture in the header image that scales without the left over space, from the theme preview it has writing over the picture in the header image: Welcome to my blog and then 2 sentences underneath. I picked this theme because that style would be perfect for the words I had put on to my image originally (have a seat at my table. Where…). How do I make these words look like the picture and words in this theme’s preview? Totally newbie here so I could have easily gotten off from the beginning!

Unfortunately, the first option I provided with the scaling part might have worked, there is the caveat of what you just described–leaving lots of spacing.

Regarding the Preview button on the theme info page here at the www.remarpro.com site, theme authors have been pushing for that to be a link to the live demo of the theme, but they are not budging on that request.

Anyway, I will try to keep helping you here as much as I can so that we can get as close to what you are wanting. I’ve been testing things out on my local site setup, now with your new image that I am using, but in the theme settings, I have the “Header Featured Image with Caption” chosen under the “Basic Settings >> Front Page Header Style”

That puts the caption title back in, but I think this is probably the closest you will get. But my guess is that you would like to have the main title of that the same as your image had before? Do you know the name of that font for that part?

I also just deleted the copy of the image I had with the text on it…I was going to try and find a similar font, but it’s gone now.

By the way, what did your header image say in text for the title and the subtext? I’m going to make a demo of it and see if what I do might work for you.

the text said:
have a seat at my table.
Where Motherhood, Friendships & Dreams Come Together.

I don’t know the name of the specific font, I put the text over the image in word swag. At this point i’ll take any font that gets me as close to the concept I want! the first sentence was a light cursive and the second sentence was non-cursive.

Currently, the site title (have a seat at my table) is showing in a black block above my menu at the top of the first page. Ideally, i’d love that to not be there and have the heading and sub-heading below the menu (like the theme preview page displayed). The tagline wording (my second sentence/subheading) is not showing up anywhere.

I am beyond appreciative of your assistance!

Is it possible to show your image again? Or if you trust me with a guess as to the font to use (I think it was a script written style), including the colour (which I think was a warm yellow with a slight orange tint?)

…and no worries, I want to make sure you are looked after because technically, the top header area of this theme was/is challenging; I think I made it a bit too complex even for myself ??

Am I close with this example?

Screenshot

I put the old picture back up. I made that version in canva and the yellow font was Allura and the white was Alike.

The example is getting close to my original!

Thanks! I just downloaded the image. I will see if I can do something closer to that. When I get it done up, I will upload another screenshot.

Quick follow up I am about to get back on this project; just starting my day here and ran late yesterday.

OK, done. I used the Allura font and the same colour.

Screenshot