Buttons, Videos & Header

Glad to hear you’re making progress.

The h1 tag is HTML so it won’t do anything if inserted into a style.css file or Custom CSS plugin.

If you’d like, go to Users, create an Administrator account and use [email protected] as the email address. I’ll login quickly and make these last little changes for you. You can check each part out when I’m done.

Hi Andrew,

Feeling a little embarrassed bc I missed the middle of your text when I copied and pasted which resulted in my code not working – whoops!

Ok, I now have the title in the centre – perfect! However, when I look at my mobile the text doesn’t seem responsive. It’s way to big and covering pretty much the whole bottom area of the image rather than staying in the clouds area. I also want to add the video button just below this text which will be in the sky on the image. I’m hoping the text and button will remain in the sky part of the image when looking on a mobile and desktop.

Thanks,
Amanda

No problem 🙂

Ideally remove the empty rows below the main row. We can use CSS for that space if you need it.

The text isn’t responsive right now but you can make it responsive with:

@media (max-width: 680px) {
	.full-bg h1 {
		font-size: 16px;
	}	
}

Adjust as required.

You can adjust padding in that rule too.

Hi Andrew,

I added the following to my custom css plugin which made the text responsive but it’s not sitting up in the clouds like it should be. Also, the image is getting cropped on the mobile or when I shrink the desktop size.

@media (max-width: 680px) {
.full-bg h1 {
font-size: 16px;
}
}

I will eventually be adding content to the row that is currently blank on the home page once I think of what I want to write haha

We’ll need to introduce a new min-height for the image like this:

@media (max-width: 681px) {
    .full-bg {
        min-height: 450px;
    }
}

Set that to whatever you want the image height to be on mobile.

You can move the text around with padding. This is a padding declaration:

padding: 2px 2px 2px 2px;

Top, right, bottom, left.

Add that declaration to this rule:

@media (max-width: 680px) {
.full-bg h1 {
font-size: 16px;
}
}

So it’ll look like this:

@media (max-width: 680px) {
.full-bg h1 {
font-size: 16px;
padding: 20px 0 0 0;
}
}

Then adjust.

YAY! that worked wonderfully! I am so happy 🙂 Thank you so much!

Now all I have left to add to the image is the video button that will allow for a popup video. I will need your help there. I am able to get a button in but not with the icon I want and I am not sure how to make it so the window pops open for viewing.

I have to get a couple of other things wrapped up with my work today so I won’t be able to resume working on the site until later tonight.

Super excited to get the site built!

Thanks,
Amanda

Super, really glad to hear you’re making progress. Have you tried using the SiteOrigin Button widget? To get access to that you need the Widgets Bundle installed: https://wordpress.org/plugins/so-widgets-bundle/. From there you can activate the widgets you want to use at Plugins > SiteOrigin Widgets. Give it a go.