[billyd]

Hi there. I needed to move the large text and the link on our header video as being right in the middle it was obscuring the action.

So I hacked it with some custom css, as follows

.custom-header-content .site-header-text {
margin-top: -219px;
margin-left: 150px;
}

.custom-header-content .more-link {
margin-top: 360px;
}

which does make it look OK on our desktops, but is probably a really bad thing to do in terms of general resizing/responsiveness etc.

Is there a better, more robust approach I could use to achieve the same effect?

http://www.diminished5th.nz

[Skandha]

@billyd: Remove the following CSS Code you have added for the header media

p {text-align: justify;} 

.custom-header-content {
	max-height: 20px;
}

.wrapper {
    padding-top: 10px!important;
}

/* to reposition the texts on the opening video */

.custom-header-content .site-header-text {
    margin-top: -219px;
	 margin-left: 150px;
}

.custom-header-content .more-link {
    margin-top: 360px;
}

 /* to fix the blank space above the youtube videos */ 
.wp-embed-responsive .wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper::before, .wp-embed-responsive .wp-block-embed.wp-embed-aspect-1-2 .wp-block-embed__wrapper::before, .wp-embed-responsive .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper::before, .wp-embed-responsive .wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper::before, .wp-embed-responsive .wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper::before, .wp-embed-responsive .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper::before, .wp-embed-responsive .wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper::before{
padding-top:0%;
}

And
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

.custom-header-content {
	transform:translateY(-30%); 
}

Let me know if this works out!
Kind Regards,
Skandha

[billyd]

OK, thanks for this. That works OK (I have increased the number to 48% to put the header where I want it)

and I have added

.site-header-text {
margin-left: 10%;
}

to bring the header text in from the left side.

Many thanks for your help!

[Skandha]

@billyd: Glad I was able to help you. Have a good day! 🙂

Kind Regards,
Skandha

[Author]

Posts