- This topic has 3 replies, 2 voices, and was last updated 5 years, 2 months ago by Skandha.
-
AuthorPosts
-
January 29, 2019 at 2:53 pm #164681billydParticipant
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?
January 30, 2019 at 12:34 am #164705SkandhaParticipant@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,
SkandhaJanuary 30, 2019 at 4:32 am #164753billydParticipantOK, 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!
January 30, 2019 at 5:51 am #164762 -
AuthorPosts
- The topic ‘Repositioning large text and link on header video’ is closed to new replies.