Various CSS Enquiries

Site URL: https://r2rdigital.squarespace.com/

Hi Squarespace Forum'ers,

I'm currently designing a website and have am excited to be picking up CSS knowledge as I go - that said, I'm still falling short and would appreciate any help on the following points. Thank you in advance for your time!

Changes specific to the mobile version of the site:

1. Is there a way to align certain sections of text differently?
2. We have some line breaks on the desktop version of the site, which make the text appear oddly on mobile - is there a way to remove the line break?
3. On that same note, can we add a line break to text on a button?
4. I'd like to make the text in the footer appear in two columns - is this possible?
5. Is it possible to align an image in the footer differently?
6. Lastly, our current landing page doesn't fill the mobile screen - is there a way to change this?

Changes to mobile and desktop:

1. Our current landing page doesn't fill both the desktop and mobile screen - is there a way to change this?
2. Is it possible to add a page transition? This ideally wouldn't be on elements, but just when a new page is visited.
3. Is it possible to time a page and for it to redirect a visitor automatically? We have a landing page where a video plays, and following this, we'd like it to send visitors to the home page. If not, are we able to time/delay a button, so that this appears after a few seconds?
4. Lastly, are we able to add a drop shadow to a video block?

I understand there's a lot of queries here, and to echo what I mentioned earlier, any help would be greatly appreciated!

The password for the site is: 'forum2020'

If you require any screenshots/further info, I'd be more than happy to provide them 🙂

Thank you,

Thomas 😊

Changes specific to the mobile version of the site:

1. Is there a way to align certain sections of text differently? yes. you can. Which text?
2. We have some line breaks on the desktop version of the site, which make the text appear oddly on mobile - is there a way to remove the line break? yes. You can. Which line breaks? Can you take screenshot?
3. On that same note, can we add a line break to text on a button? Yes. You can, but maybe you will need a Business Plan. Which button?
4. I'd like to make the text in the footer appear in two columns - is this possible? Which text? can you describe in detail?
5. Is it possible to align an image in the footer differently? yes. You can. Can you describe in detail?
6. Lastly, our current landing page doesn't fill the mobile screen - is there a way to change this? Can you describe in detail?

Changes to mobile and desktop:

1. Our current landing page doesn't fill both the desktop and mobile screen - is there a way to change this? Can you describe in detail?
2. Is it possible to add a page transition? This ideally wouldn't be on elements, but just when a new page is visited. You can try Global Animation...in Home > Design
3. Is it possible to time a page and for it to redirect a visitor automatically? We have a landing page where a video plays, and following this, we'd like it to send visitors to the home page. If not, are we able to time/delay a button, so that this appears after a few seconds? Would you like to redirect the page after a few seconds ?. If you use Business Plan, I can give the code.
4. Lastly, are we able to add a drop shadow to a video block? > Yes. You can. Which video block?

Is there a way to align certain sections of text differently?

Center: Which text?

Left: Text under R2R Video? "only the best... to image girl on table?"

On that same note, can we add a line break to text on a button?

I think it needs JavaScript. I will check again later.

I'd like to make the text in the footer appear in two columns - is this possible?

Line Break

 Is it possible to align an image in the footer differently

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
/* footer text 2 columns */
div#page-section-5ec2ddfd8d38477789f31095>.row:nth-child(2) .span-2 {
    float: left !important;
    width: 50% !important;
}
div#page-section-5ec2ddfd8d38477789f31095>.row:nth-child(2) .span-4:nth-child(4) {
    clear: both;
}
/* remove footer line break */
div#block-yui_3_17_2_1_1589894668829_18511 br {
    display: none;
}
/* align footer image */
div#page-section-5ec2ddfd8d38477789f31095 .span-4 .span-2:first-child {
    width: 50% !important;
    margin: 0 auto !important;
    float: none !important;
}
}

too many questions, I will check later

Our current landing page doesn't fill both the desktop and mobile screen - is there a way to change this?

I see desktop fine here. Do you use Mac?

Add to Page Settings > Advanced > Header

<style>
  @media screen and (max-width:767px) {
  #page section {
    height: 100vh;
}
  }
</style>

Video Block Dropdown

Add to Home > Design > Custom CSS

div#block-yui_3_17_2_1_1590072153932_8631 {
    box-shadow: 5px 2px 2px 1px black;
}

Quote

11 minutes ago, tuanphan said:

Is there a way to align certain sections of text differently?

Center: Which text?

Left: Text under R2R Video? "only the best... to image girl on table?"

It seems as though some of these issues have been fixed, so now it's just:

Centre: Only the best & nothing less > Identify, attract and engage > "We're committed... through tailored communication."

Left: Align the R2R Digital logo in the footer to the left.

15 minutes ago, tuanphan said:

On that same note, can we add a line break to text on a button?

I think it needs JavaScript. I will check again later.

OK, thank you!

15 minutes ago, tuanphan said:

I'd like to make the text in the footer appear in two columns - is this possible?

Line Break

 Is it possible to align an image in the footer differently

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
/* footer text 2 columns */
div#page-section-5ec2ddfd8d38477789f31095>.row:nth-child(2) .span-2 {
    float: left !important;
    width: 50% !important;
}
div#page-section-5ec2ddfd8d38477789f31095>.row:nth-child(2) .span-4:nth-child(4) {
    clear: both;
}
/* remove footer line break */
div#block-yui_3_17_2_1_1589894668829_18511 br {
    display: none;
}
/* align footer image */
div#page-section-5ec2ddfd8d38477789f31095 .span-4 .span-2:first-child {
    width: 50% !important;
    margin: 0 auto !important;
    float: none !important;
}
}

This worked like a dream - thank you so much! It's just the image now, as mentioned above, we'd like it aligned to the left, if possible.

9 minutes ago, tuanphan said:

Our current landing page doesn't fill both the desktop and mobile screen - is there a way to change this?

I see desktop fine here. Do you use Mac?

Add to Page Settings > Advanced > Header

<style>
  @media screen and (max-width:767px) {
  #page section {
    height: 100vh;
}
  }
</style>

This also worked fantastically, thank you. Yes, I am using a Mac and sometimes the Desktop version shows a white line towards the bottom of the screen.

10 minutes ago, tuanphan said:

Video Block Dropdown

Add to Home > Design > Custom CSS

div#block-yui_3_17_2_1_1590072153932_8631 {
    box-shadow: 5px 2px 2px 1px black;
}

So, with this it is adding a solid border/drop shadow as opposed to a faded one, if that makes sense? The buttons all have a drop shadow on them, and we're trying to replicate the same kind of thing with the video block, if possible.

Once again, thank you so much for your time, it is greatly appreciated!

Hi Tuanphan,

Just following on from my post above - I'm getting a bit closer to achieving the drop shadow on the video block, but a border seems to be appearing?

Just thought I'd update you.

Many thanks,

Thomas

Add border around page content or video block?

With redirect, add this to Page Settings > Advanced > Header

<script>
         setTimeout(function(){
            window.location.href = 'https://beaverhero.com';
         }, 20000);
</script>

replace beaverhero with new url

42 minutes ago, tuanphan said:

With redirect, add this to Page Settings > Advanced > Header

<script>
         setTimeout(function(){
            window.location.href = 'https://beaverhero.com';
         }, 20000);
</script>

replace beaverhero with new url

^ This worked first time - you are amazing!!

------

So, the last few things I am hoping to do are:

1. Video Drop Shadow - issue with border
2. Text alignment on mobile
3. Line break on a button
4. Image alignment on mobile (footer)

^ Figured it might be better for me to summarise here as I'm aware there's a lot of info from me on this post.

I am incredibly appreciative of your time and knowledge, so thank you for your help so far 🙂 

Hi Tuanphan,

Hope you're having a great weekend!

I think I've resolved most of these issues now, so you can ignore my previous posts.

Instead, are you able to assist with the following?

1. Can we force the auto-play of a video block even if a browser prevents it? This is occurring on our 'Welcome' page

2. We're still having an issue with the video drop shadow - are you able to advise?

3. Is there a way for us to swap the order of two blocks on mobile? We'd like the image to sit before the text, if possible.

4. Is there a way we can lock all of our background images in place, so these don't resize and move depending on different breakpoints?

5. Lastly, can we remove certain elements of text on mobile, i.e. the arrow emoji.

We're hoping to launch our site on Tuesday morning, so any help you're able to provide is greatly appreciated.

Thank you,

Thomas

Hide icon

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1589836281520_31574 em {
    display: none;
}
}

Button shadow

div#block-yui_3_17_2_1_1590482467866_11912 button {
    box-shadow: 0px 2px 30px #777;
    background: #000;
    border-color: #000;
    color: #fff;
    font-family: Poppins;
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: .02em;
    padding: 1.1em 1.837em;
    border-radius: 5px;
}

Video shadow

.video-block>div {
    box-shadow: 0px 2px 30px #777;
}