Would Appreciate Help with Coding to Make the Text Under the Video Closer to the Video

[cyrusnazari]

Hi,

We would like to get the coding to make the text underneath the video closer to the video on our “The Designer” page. An inch away would be nice.

Page Link: https://cyrusnazari.com/pages/about

Theme: Fleetwood Cadillac

Thank you for the help.

[BSS-Commerce]

Hi @cyrusnazari ,

Please follow these steps:

Then find the base.css file and add the following code at the end of the file then press “Save”:

.page-width .rte {
    margin-top: -13px;
}

Result:

If you want the distance from “The Designer” to the header to be smaller, continue adding the following code:

.page-width--narrow {
 padding-top: 0px !important;
}

The result you will achieve:

Hope it helps @cyrusnazari

[Farouk-dev]

Hi @cyrusnazari ,
TLDR: Your Vimeo Video was placed in a wrong container(

tag).

Adjust the padding(reducing the space below video) resizes the video, shrinks it.

One easy solution is to place the video embed in a div of its own and give it a specific size.

Place the ‘Responsive’ Vimeo Video embed in there. Video will adapt to any screen size.

How to do it? Here is a rough idea:

• Open your Vimeo video in a new tab.

• Click share, click ‘Show Options’,

  

• Scroll down, under ‘Size’ select, Responsive.

• Scroll up, under Embed, highlight and copy code.

  

• Then head back to shopify theme files, place video embed code inside your newly created div…

Let me know if this makes sense or if you have any questions.

[cyrusnazari]

Hi, thank you for the help. How do I make a newly created div and where is it located in the theme files? I’ve got the link and new size copied but can’t find it in the coding. Someone else edited the code and input the original video.

[cyrusnazari]

Hi, checking in on if we can get direct instructions on where to place the new coding for the video.

Thank you!

[Farouk-dev]

Hey @cyrusnazari ,

Here’s a quick copy & paste solution…

1. Find the current Vimeo video. Hard to tell where yours is placed but…
   Head over to your ‘About’ page(https://cyrusnazari.com/pages/about) in your shopify dashboard.
   We’re going to edit this page

   

2. Edit ‘About’ page HTML. Click this button, see image below

   

3. Find and DELETE current ‘Vimeo Video Embed Code’. Should look like this:

### <iframe title="About Cyrus Nazari.mov" style="position: absolute; top: 0; left: 0; width: 100%; height: 80%;" src="https://player.vimeo.com/video/787670316?h=f58615d393&badge=0&autopause=0&player_id=0&app_id=58479" allowfullscreen="" allow="autoplay; fullscreen; picture-in-picture" frameborder="0"></iframe>

• Replace it with this new ‘Vimeo Video Code’ below:

<iframe src="https://player.vimeo.com/video/787670316?h=f58615d393&title=0&byline=0&portrait=0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen=""></iframe>

​

• Lastly Edit your CSS, instructions below:

  a) From your Admin Page, click Online Store > Themes >Actions > Edit code

  b) In the Asset folder, open the base.css

  c) Paste the code below at the very bottom of the file.

.vimeo-container {
    max-width: 40rem !important;
    margin: 0 auto !important;
}

Let me know if that helps

[cyrusnazari]

Thank you that worked perfectly.

[Farouk-dev]

You’re welcome. Glad I could help