Full bleed background video for mobile but not desktop?

Hello,

Is there a way to have a background video full-bleed on my mobile site, but not on my desktop version. I would like to do this on my homepage:

davidjcavallo.com

but changing the full bleed/inset settings on either mobile/desktop seems to change both in 7.1 with the fluid engine.

Thank you!
David

Hi,

Add to Design > Custom CSS

@media screen and (max-width:767px) {
[data-section-id="63b88616bd8b940cfbc42144"] {
    padding: 0px !important;
    min-height: 40vh !Important;
}
.fe-63b8861644dcb7206bade292 {
    --grid-gutter: unset !important;
    column-gap: 0px !important;
    grid-template-columns: unset !important;
    display: block !important;
}
}

Thank you for your response. I've added this to my Custom CSS but it doesn't seem to be working. I've double checked that I added it correctly, but no change seems to have occurred on my home page.

Kind regards,

David

On 2/3/2023 at 1:30 AM, DCavallo said:

Thank you for your response. I've added this to my Custom CSS but it doesn't seem to be working. I've double checked that I added it correctly, but no change seems to have occurred on my home page.

Kind regards,

David

Try this new code

@media screen and (max-width: 767px) {
    [data-section-id="63b88616bd8b940cfbc42144"] {
        padding:0px !important;
        min-height: unset !important;
        height: 30vh;
    }
}

Thank you for your persistence and additional code. Unfortunately the functionality of the mobile and desktop sites seem to be tied together in this issue--regardless of the new CSS, "full bleed" and "inset" for the video in question seem to affect both versions of the site. I can't get them to be independent.

Best,
David

On 2/9/2023 at 6:41 AM, DCavallo said:

Thank you for your persistence and additional code. Unfortunately the functionality of the mobile and desktop sites seem to be tied together in this issue--regardless of the new CSS, "full bleed" and "inset" for the video in question seem to affect both versions of the site. I can't get them to be independent.

Best,
David

Can you send all current code in CSS box?

Thank you. See below:

.spacer-block {
     padding-top: 0!important;
     padding-bottom: 0!important;
 }

 .spacer-block .sqs-block-content {
      line-height: 0.0em;
        min-height: 0px;
   
    }
.item-pagination {
  display: none;
}

a {
text-decoration: none !important;
}

.sqs-block-content p a, .sqs-block-content p a:visited {
color: GREY !important}

.header-menu-nav-item a {
    font-size: 20.5px;
}

.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item {
    font-size: 1.03rem;
}

On 2/14/2023 at 6:41 AM, DCavallo said:

Thank you. See below:

 

.spacer-block {
     padding-top: 0!important;
     padding-bottom: 0!important;
 }

 .spacer-block .sqs-block-content {
      line-height: 0.0em;
        min-height: 0px;
   
    }
.item-pagination {
  display: none;
}

a {
text-decoration: none !important;
}

.sqs-block-content p a, .sqs-block-content p a:visited {
color: GREY !important}

.header-menu-nav-item a {
    font-size: 20.5px;
}

.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item {
    font-size: 1.03rem;
}

Can you keep code I sent in CSS box then send all code?

.spacer-block {
     padding-top: 0!important;
     padding-bottom: 0!important;
 }

 .spacer-block .sqs-block-content {
      line-height: 0.0em;
        min-height: 0px;
   
    }
.item-pagination {
  display: none;
}

a {
text-decoration: none !important;
}

.sqs-block-content p a, .sqs-block-content p a:visited {
color: GREY !important}

.header-menu-nav-item a {
    font-size: 20.5px;
}

.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item {
    font-size: 1.03rem;
}

@media screen and (max-width: 767px) {
    [data-section-id="63b88616bd8b940cfbc42144"] {
        padding:0px !important;
        min-height: unset !important;
        height: 30vh;
    }
}

On 2/17/2023 at 7:21 AM, DCavallo said:

.spacer-block {
     padding-top: 0!important;
     padding-bottom: 0!important;
 }

 .spacer-block .sqs-block-content {
      line-height: 0.0em;
        min-height: 0px;
   
    }
.item-pagination {
  display: none;
}

a {
text-decoration: none !important;
}

.sqs-block-content p a, .sqs-block-content p a:visited {
color: GREY !important}

.header-menu-nav-item a {
    font-size: 20.5px;
}

.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item {
    font-size: 1.03rem;
}

@media screen and (max-width: 767px) {
    [data-section-id="63b88616bd8b940cfbc42144"] {
        padding:0px !important;
        min-height: unset !important;
        height: 30vh;
    }
}

That is strange. This code run on mobile only. Try move it to top of CSS box and try again