Align text to top and align button to bottom in a cover block. Possible?

Hi there @boppar ????

OK, so if I am getting this right you would like to move the button to the top of that cover and the text to the bottom.

The first step would be to resort the items within the block. Please have a look at the animated GIF below.

Link to image: https://d.pr/i/S4IuEy

Once you have resorted them you would need to apply CSS styling to move the button to the very top and the text to the end.

Let us know if this solves your question or if you need any further help.

Cheers!

@danielinhou
Of course I know how to move the button below the text. ??

OK, so it’s possible to move the the text to the very top and the button to to the end using CSS styling.

The problem is that I can’t figure out what CSS I need to apply. Any suggestion?

@danielinhou
Hi Dani.
I’m still struggling to find CCS to move the text to the very top and the button to to the end. No success so far. It would be great if you have any suggestions.

It would be wonderful of some of the staff of this great theme could help out.
Thanks in advance!

Hi, @boppar!

Sorry for the lack of responses here as this one was a little trickier to figure out.

Can you please try the following CSS?

@media only screen and (min-width: 768px) {
	.wp-block-cover__inner-container h2 {
		position: relative;
		top: -100 px;
	}

	.wp-block-cover__inner-container div {
		position: relative;
		bottom: -100 px;
	}
}

@dcka
Hi Cara.

I really would like this to work.
I tried your CSS, but unfortunately nothing changed.

Sorry about that, @boppar! Let’s try again. Please replace the code I previously provided with the following:

@media only screen and (min-width: 768px) {
	.wp-block-cover .wp-block-cover__inner-container h2 {
		position: relative;
		top: -100px;
	}

	.wp-block-cover .wp-block-cover__inner-container .wp-block-buttons {
		position: relative;
		bottom: -100px;
	}
    
    .wp-block-columns .wp-block-cover .wp-block-cover__inner-container .wp-block-buttons {
        bottom: initial;
    }
}

@dcka

Hi Cara. I really appreciate your help. Unfortunately this CSS didn’t change anything.

Hi, @boppar!

I just checked your site, and I do see changes there:

Link to image: https://d.pr/i/2UsDnc

To note, however, the code I provided will only work on screens that are at least 768px in width. You can adjust that to be smaller or larger, but we recommend 768px.

If you’re still not seeing the change, can you please check on your browser’s incognito window?

Hi @dcka

It works on the top image, but not on the five images below (the categories).
https://ibb.co/Tv5H6SF
Do you have any idea why it’s like that?

Oh, I thought you only wanted it on the main image, and not the categories.??

In that case, please try this:

@media only screen and (min-width: 768px) {
	.wp-block-cover .wp-block-cover__inner-container h2 {
		position: relative;
		top: -100px;
	}

	.wp-block-cover .wp-block-cover__inner-container .wp-block-buttons {
		position: relative;
		bottom: -100px;
	}
    
    .wp-block-columns .wp-block-cover .wp-block-cover__inner-container p {
        position: relative;
        top: -100px;
    }
    
    .wp-block-columns .wp-block-cover .wp-block-cover__inner-container .wp-block-buttons {
        bottom: -100px;
    }
}

Hi, @boppar!

We haven’t heard back from you in a while, so I’m going to mark this thread as resolved. However, we’ll be here if/when you’re ready to continue.

@dcka

Hi Cara.
Sorry for not responding before (been away on a trip). It works great!
Thank you for taking time and helping out.