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

Question

Posted (edited)

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 😊

Edited by tjhomas

Share this post


Link to post

10 answers to this question

Recommended Posts

  • 0

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?

You can send your question to my email to get faster answer.

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
  • 0
Posted (edited)

Hi tuanphan,

Thanks so much for your reply - here's the info you requested and just as an overall, we are on the Business Plan:

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?
1889644830_Screenshot2020-05-22at10_10_26.png.037b6df270229692f61644e8798d6383.png 

  • If possible, I'd like to align all of this text to the left 

1302607732_Screenshot2020-05-22at10_10_56.png.b4faf1d9ac1de822b735e93aa7ec8ced.png 

  • Can we align all of this content to the centre? 

806603986_Screenshot2020-05-22at10_10_04.png.463e277267f47765cf9b3756778d5f2e.png  

  • Here, this text is in two separate blocks, but we'd like to make it one for mobile, which means the text much be smaller.

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?

1889644830_Screenshot2020-05-22at10_10_26.png.037b6df270229692f61644e8798d6383.png 

  • If possible, I'd like the sentence to carry on without the line break, so bumping the text up. Not bothered about having 3 lines, but just wish for the text to appear correctly

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?

712711516_Screenshot2020-05-22at10_10_35.png.988af0340cd95a41ef923da262423979.png

  • If possible, we'd like '(Coming Soon)' to sit on the line beneath

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?

1405692766_Screenshot2020-05-22at10_10_14.png.d7fdf797b67ee9b5a602adc17b325451.png 

  • Here are two blocks of text, can we make these sit side-by-side, so have 2 columns?

5. Is it possible to align an image in the footer differently? yes. You can. Can you describe in detail?

1889644830_Screenshot2020-05-22at10_10_26.png.037b6df270229692f61644e8798d6383.png 

  • As mentioned earlier, the image that sits at the top would be great if it could be aligned to the centre.

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?

915850842_Screenshot2020-05-22at10_25_00.png.26b4cdf796f7cbadc2b6984eb116b906.png 

  • Here on mobile, I think due to the page height, it displays a white page BG below. I think the way to fix this is for us to increase the page height and just use spacers to push the content to the top of the page, but just wonder what the page height needs to be to stop this from happening and where I'd make this change?

1732816131_Screenshot2020-05-22at10_25_11.thumb.png.ab9e5e9a6213d206c0fe6f7bbaa40899.png 

  • The same issue on Desktop, although I feel like the page is tall enough?

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 

  • Here, I only have access to add animations to elements as opposed to pages? If possible, this would just be on pages.

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. 

  • Yes please! So, our video runs for roughly 27 seconds (allowing time for load) 

4. Lastly, are we able to add a drop shadow to a video block? > Yes. You can. Which video block? 1801564822_Screenshot2020-05-22at10_29_36.thumb.png.24e9b1f0e4ca222f6c24a92d2d9e43ed.png394199224_Screenshot2020-05-22at10_29_49.thumb.png.115f82532718c85fa98681148fabbb07.png

  • These are the video blocks (One on the 'Welcome' page and the other on the 'Home' page - these changes would be the same for mobile, too 🙂 
 
Hope all this helps, let me know if anything is unclear.
 
Thank you again!
Edited by tjhomas

Share this post


Link to post
  • 0

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


You can send your question to my email to get faster answer.

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
  • 0

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

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
  • 0
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.

890206623_Screenshot2020-05-22at11_14_24.png.975ee8c15af60f56fa40ee127ebaedc2.png

1145827118_Screenshot2020-05-22at11_14_51.png.d364a1ef1bc7322f3683a62241efb94c.png

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

Share this post


Link to post
  • 0

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?

212063697_Screenshot2020-05-22at19_15_35.png.1ac75bda44083935d8983ed94eb76c00.png

Just thought I'd update you.

Many thanks,

Thomas

Share this post


Link to post
  • 0

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


You can send your question to my email to get faster answer.

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
  • 0
Posted (edited)
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 🙂 

Edited by tjhomas

Share this post


Link to post
  • 0
Posted (edited)

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?

212063697_Screenshot2020-05-22at19_15_35.png.1ac75bda44083935d8983ed94eb76c00.png

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.

1376958753_Screenshot2020-05-24at14_42_21.png.cd062f6be9c7c6a74b0effc62b3e9764.png

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.

783520480_Screenshot2020-05-24at14_45_54.png.831590faa9a8f4a1b361db54eb9e54ee.png

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

Thank you,

Thomas

Edited by tjhomas

Share this post


Link to post
  • 0

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

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...