I've been tearing my hair out trying to fix an animated text element that I can't quite get to sit properly on the page.
website: 2pt5.co.uk
password: dontgiveupthedayjob
You'll see the animated text in the bottom middle half of the screen. It's never exactly in the centre, and I don't understand why.
Also, the padding of the text from the bottom of the coloured background is changing with different window sizes (mobile/ipad) etc. and I'd like it to be fixed. If you look at the 'Work' page on the site you'll see some static text that will give you an indication as to the position I'd like the animated text on the home page to be in.
If anyone has the time to help, I'd be super grateful!
The code I've used to position the text is as follows:
I see on tablet, menu has 2 items only. You can consider using desktop menu on Tablet. If you want this, we can take a look.
Also, on Mobile, footer text is align left - right. If you want align
Add to Home > Design > Custom CSS
/* Force desktop nav on tablet - version 2 */
@media screen and (min-width:768px) and (max-width:991px) {
.header-display-desktop {
display: flex !impor
Question
EdG 0
Site URL: https://www.2pt5.co.uk
Hi All,
I've been tearing my hair out trying to fix an animated text element that I can't quite get to sit properly on the page.
website: 2pt5.co.uk
password: dontgiveupthedayjob
You'll see the animated text in the bottom middle half of the screen. It's never exactly in the centre, and I don't understand why.
Also, the padding of the text from the bottom of the coloured background is changing with different window sizes (mobile/ipad) etc. and I'd like it to be fixed. If you look at the 'Work' page on the site you'll see some static text that will give you an indication as to the position I'd like the animated text on the home page to be in.
If anyone has the time to help, I'd be super grateful!
The code I've used to position the text is as follows:
@media screen and (max-width:2500px) {
div#block-yui_3_17_2_1_1602202900295_3511 {
padding-bottom: 62px!important;
}
}
.rw-wrapper{
width: 85%;
position: center;
margin: auto;
font-family: 'Helvetica neue';
overflow: hidden;
}
.rw-words{
width: 85%;
display: inline;
position: center;
margin: auto;
overflow: hidden;
}
.rw-words span{
position: absolute;
opacity: 0;
overflow: hidden;
margin: auto;
width: 85%;
color: #ffffff;
}
Link to post
Top Posters For This Question
6
3
Popular Days
Nov 13
2
Nov 15
2
Nov 18
1
Nov 11
1
Top Posters For This Question
EdG 6 posts
tuanphan 3 posts
Popular Days
Nov 13 2020
2 posts
Nov 15 2020
2 posts
Nov 18 2020
1 post
Nov 11 2020
1 post
Popular Posts
tuanphan
Try adding to Home > Design > Custom CSS .rw-words { display: flex; justify-content: center; }
tuanphan
I see on tablet, menu has 2 items only. You can consider using desktop menu on Tablet. If you want this, we can take a look. Also, on Mobile, footer text is align left - right. If you want align
tuanphan
Add to Home > Design > Custom CSS /* Force desktop nav on tablet - version 2 */ @media screen and (min-width:768px) and (max-width:991px) { .header-display-desktop { display: flex !impor
8 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment