Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Animated text, wrong screen position

EdG

Asked by EdG,

Followers 2
Go to solution Solved by tuanphan,

Question

EdG    0

EdG
Posted

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
  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

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

  • 1

tuanphan    8,930

tuanphan
  • Solution
Posted
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;
}
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL

--- Happy New Year

Link to post
  • 1

tuanphan    8,930

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

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL

--- Happy New Year

Link to post
  • 0

EdG    0

EdG
  • Author
Posted
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

Link to post
  • 0

EdG    0

EdG
  • Author
Posted

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! 

 

Link to post
  • 0

EdG    0

EdG
  • Author
Posted
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!

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign Up / Login
Followers 2
Go to question listing
×
×
  • Create New...

Support

Community

Developers

Resources