Jump to content

Animated text, wrong screen position

Recommended Posts

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 comment
  • Replies 8
  • Views 590
  • Created
  • Last Reply
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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 comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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 comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.