Can't change mobile view! (mobile)

Hi! 

I've got a bit of very simple code built into my site so that my mobile and desktop appearences are slightly different. Now, I need to add a video embed block into my mobile version of the site so it displays exactly as the video embed on my desktop view but maintains the different buttons and background picture aspect ratio. 

When I go to remove the code so I can add in a new block, the whole thing seems to go haywire! I reached out to the support team at Squarespace but they advised me to come here due to the custom code. 

Help? Please? 

URL: https://www.bumbplanet.com/

You mean video disappear on mobile

or you need to use different videos on desktop - mobile?

On 4/26/2024 at 9:49 AM, tuanphan said:

You mean video disappear on mobile

or you need to use different videos on desktop - mobile?

No, I need to use the same video but cause of the code, I can't actually add in a new block when I switch to mobile view. 

On 4/26/2024 at 9:49 AM, tuanphan said:

You mean video disappear on mobile

or you need to use different videos on desktop - mobile?

For context, here are some pictures. 

Add Block, Block will appears on both Desktop + Mobile, so you need to change to Desktop Layout to add block

On 4/30/2024 at 9:08 AM, tuanphan said:

Add Block, Block will appears on both Desktop + Mobile, so you need to change to Desktop Layout to add block

When I do this, it doesn't appear in the mobile preview because of my CSS coding.

5 hours ago, bumbplanet said:

When I do this, it doesn't appear in the mobile preview because of my CSS coding.

Please share your CSS code so the community can try and help.

On 5/17/2024 at 9:22 PM, melody495 said:

Please share your CSS code so the community can try and help.

Sure thing, here you go: 

@media screen and ( max-width : 767px ) {

  [data-section-id="645bf7c41993a9492acbdf64"] {
  
    display : none;

    }

  }

@media screen and ( min-width : 768px ) {

  [data-section-id="6570fb87e4fa933c10d5becd"] {
  
    display : none;

    }
    
  }

43 minutes ago, bumbplanet said:

...

  [data-section-id="645bf7c41993a9492acbdf64"] {
      display : none;
}

....

...

  [data-section-id="6570fb87e4fa933c10d5becd"] {
      display : none;
}
....

Hi, these are section ids, so you are hiding an entire section depending on the screen size. Assuming you are trying to add a block to one of those sections, and the block "disappears" because it is inside one of the hidden sections.

Without knowing how you want the new block to behave in regards to the hidden sections, my only suggestion is to add the new block to a new section, so this new section is unaffected by your code.

Let me know how it goes.