Animated text, wrong screen position

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;
}

Try adding to Home > Design > Custom CSS

.rw-words {
    display: flex;
    justify-content: center;
}

Brilliant, that did the trick, thanks so much!

23 minutes ago, EdG said:

Brilliant, that did the trick, thanks so much!

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 left all elements, add this to design > Custom CSS

/* footer align */
@media screen and (max-width:767px) {
[data-section-id="5f820acb258d731d213fbd38"] * {
    text-align: left !important;
}
}

Ah that’s a great tip, thanks again! 

On 11/13/2020 at 11:48 AM, tuanphan said:

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 left all elements, add this to design > Custom CSS

/* footer align */
@media screen and (max-width:767px) {
[data-section-id="5f820acb258d731d213fbd38"] * {
    text-align: left !important;
}
}

 

And yes, I’d definitely like to try having the two menu items show on mobile as well.

Thanks again for all your help

Hi tuanphan, any chance you'd be able to help me with the css to use the desktop menu on Tablet?  Struggling to find the code!

Thank you! 

On 11/19/2020 at 5:27 AM, EdG said:

Hi tuanphan, any chance you'd be able to help me with the css to use the desktop menu on Tablet?  Struggling to find the code!

Thank you! 

 

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 !important;
}
.header-display-mobile {
    display: none;
}
.header-burger {
    display: none;
}
.header-nav {
    display: flex !important;
}
.header-nav {
    display: flex !important;
    flex: 70% !important;
    justify-content: flex-end;
    width: 70% !important;
}
.header-title {
    flex: 50% !important;
}
}

On 11/22/2020 at 1:56 AM, tuanphan said:

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 !important;
}
.header-display-mobile {
    display: none;
}
.header-burger {
    display: none;
}
.header-nav {
    display: flex !important;
}
.header-nav {
    display: flex !important;
    flex: 70% !important;
    justify-content: flex-end;
    width: 70% !important;
}
.header-title {
    flex: 50% !important;
}
}

 

Perfect! Thanks so much!