Header image won’t scale

can you leave the h in have lowercase and add a period after table? : have a seat at my table.
thank you!!!

That is easy to do as this is just the title of the page showing up in the caption text…not superimposed in the image itself.

Overall, is this looking like this is the solution?

I can give you the CSS code to copy and paste into your customizer and see if this works for you? I also made sure the text will downsize as you get into smaller devices, although I have an iPhone, it should be OK for others too.

yes! that sounds like the miracle I have been looking for!!!

Step 1 – Go to the customizer and then to the Basic Settings. Under Front Page Header Style, select Header Featured Image with Caption

Step 2 – The page you are using for your front page, rename it as “Have a seat at my table

Step 3 – While you have your page open in the editor, enter this in the Excerpt box “Where Motherhood, Friendships & Dreams Come Together” **If the excerpt box isn’t showing below the editor, go to the top right and click on Screen Options and enable the excerpts.

Step 4 – Go back to the customizer but to the Additional CSS tab and copy this:

@import url('https://fonts.googleapis.com/css?family=Allura');

#header-image::after {
    background-color: rgba(0, 0, 0, 0.1);
}
.home .site-branding {
    display: none;
}
.home #header-caption h1 {
	  font-family: Allura,"Times new roman",Georgia;
font-weight:400;
    font-size: 4rem;
    line-height: 0.75;
    color: #ffde59;
margin-bottom: 0;
	text-shadow: 2px 2px 8px rgba(0,0,0,0.55);
}
.home #header-caption p {
   font-size: 1.5rem;
	margin: 0 auto;
	line-height:1.2;
    text-shadow: 3px 2px 8px rgba
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	.home #header-caption h1 {
		font-size: 5rem;
	}
	.home #header-caption p {
		font-size: 1.75rem;
	}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	.home #header-caption h1 {
		font-size: 5.5rem;		
		line-height: 1;
	}
	.home #header-caption p {
		font-size: 2rem;
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.home #header-caption h1 {
		font-size: 6rem;
	}
	.home #header-caption p {
		font-size: 2.5rem;
	}
}

So what this code does, it adds the Allura google font to your site, then it styles the page title and the excerpt intro text below the title. It then colours the title but it also has different font sizes for different viewing screens from phone to desktop.

I know you changed the dark overlay to make it disappear, but I made it a tiny bit shaded to that your text shows up better.

Regarding the site title box at the top; you said you want that gone. I also added code to the above that does that, but only on the home page.

See if all this works.

I published it but it doesn’t look like it is scaling down still on my iPhone. It looks great on the desktop though!

At this point, do you think I need to just change my theme to one that works better with a phone view?

• This reply was modified 6 years, 1 month ago by ery2cute5787.

I just went to your site but I see you changed things back. Can you put back what I had you do and I will look at your site on my phone?

Thanks.

should I have no image in the header image section when I enter your code?

Also when I enter your code, I have an error that says “@impor” not allowed here so it is showing an error.

You can put the image you just had (with no text, just the image).

Regarding the @import, that is odd because I can put that in my customizer. But let’s get the image back in and then copy my code into your additional css tab and we will go from there ??

blank image is back up and live.

When I enter the code, the black box with wording above the menu disappears (yay!) but no other wording is coming up. The error still is showing so it is cautioning me to publish with the code.

Thanks for putting the image in. Now, I just need you to do this:

Go to the customizer and then to the Basic Settings and then under Front Page Header Style, select Header Featured Image with Caption

that is what it is set to.

hmmm odd, because I don’t see the caption showing. You also mentioned your site title is gone but I see it. Does the page title caption show up for you and your site title at the top (with the black box) gone?

Actually, what is odd is that I don’t even see the custom styles being loaded (the stuff you put in the Additional CSS tab of the customizer). I just looked at your site’s source code.

Where did you copy and paste the code?

This is all I see being loaded:

<style type="text/css" id="wp-custom-css">
#masthead {
    background-color: #cbb1e2;
}
#header-image::after {
    background-color: rgba(0, 0, 0, 0);
}			
</style>

I didn’t hit publish with the error popping up for the @import should I go ahead and publish it anyways?

yup! Go for it ??