Bauyu

Hi,

Sorry I need to change the layout of my design, the current layout looks like this:

It included two facebook video, the tablet and mobile view still needs to be adjusted.

tablet view:

mobile view:

I really appreciate your help, thank you! 

1 hour ago, method said:

Hi @Bauyu

Try adding this into your Custom CSS, it will apply to all iframe embeds with a square aspect ratio

.embed-block iframe[src][height="476"][width="476"] {
  @supports (aspect-ratio: 1/1) {
    width: 100%;
    height: 100%;
    aspect-ratio: 1/1;
  }
  @media (min-width: 640px) {
    min-width: 476px;
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

Let me know how it goes!

Hello! 

It seems works in the tablet view very well, but in the mobile view still like this: 

Site URL: https://www.bauyu.com/

Here is the page I want to embed facebook video.

https://www.bauyu.com/current-exhibition

I'm trying to use this code : 

<iframe src="https://www.facebook.com/plugins/video.php?height=476&href=https%3A%2F%2Fwww.facebook.com%2FBYARTTaipei%2Fvideos%2F363770025768375%2F&show_text=false&width=476&t=0" width="476" height="476" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" allowFullScreen="true"></iframe> 

It works well in desktop view, but in the mobile and tablet it looks bad. 

Please let me know how to adjust, thank you!

Site URL: https://www.bauyu.com/kol-experiences

The mobile view of this page is like the second attachment below, which shows only one item in a row. 

I want to display two items in one row, is it possible to do so? 

2 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Tablet Art people */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-6204857e20bdac7a9d26d54e {
.row:nth-child(2)>.col:nth-child(-n+2) {
    width: 50%;
}
.span-4 .span-2:last-child {
    width: 100%;
}
.span-4 .span-2:first-child {
    display: none;
}
.span-6 {
    width: 100%;
}
.span-6 .span-2:nth-child(-n+2) {
    width: 50%;
    margin-top: 20px;
}}
div#page-6204a6624613c972486f2c5f {
.row>.col:nth-child(-n+2) {
    width: 50%;
}
.row>.col:nth-child(-n+2) .span-2:first-child {
    display: none;
}
.row>.col:nth-child(-n+2) .span-2:last-child {
    width: 100%;
}
.span-6 {
    width: 100%;
}}
}

 

Thank you!! It works!!

On 3/19/2022 at 4:31 PM, tuanphan said:

Hi,

How about changing to 2 items/row on tablet only?

I think it is possible to try, could you provide some code? Thank you!

Site URL: https://www.bauyu.com/art-people-intro

The attachments are desktop view and tablet view. 

As you can see the text and buttons are displayed well on the desktop. But when on tablet view, they look very long and narrow. 

Here is the code I used, is it related to the code I used?

#block-   {
   border-bottom: 8px groove #F0D1BF;
  padding: 0px ; margin-left: 15px; margin-right: 15px
}

#block-  {
  background: #FAF8F3 ; margin-left: 15px; margin-right: 15px
}

#block-  {
  background: #FAF8F3 ; margin-left: 15px; margin-right: 15px
}

On 3/9/2022 at 6:34 PM, Jia said:

Hi, yes you need to add more code, specifically targeting the mobile menu links. Here it is:

.Mobile-overlay-nav .Mobile-overlay-nav-item {
  font-family: 'noto-serif-tc' !important;
}

Hello, how can I change the sub navigation (image002)  with mobile menu? 

It's from this navigation! (image001)   Thanks again !

14 hours ago, Jia said:

Hi, yes you need to add more code, specifically targeting the mobile menu links. Here it is:

.Mobile-overlay-nav .Mobile-overlay-nav-item {
  font-family: 'noto-serif-tc' !important;
}

Thank you sooo much!!!! 😍

On 3/7/2022 at 6:36 PM, Jia said:

Hi, just add this code to custom css. Let me know how it goes 🙂 

.Header-nav-item {
  font-family: 'noto-serif-tc';
}

Hello, 

I have found another problem is that the font of the mobile version cannot be changed, do I need to add any more css code?

14 hours ago, Jia said:

Hi, just add this code to custom css. Let me know how it goes 🙂 

.Header-nav-item {
  font-family: 'noto-serif-tc';
}

It works!!!! Thank you!!😭

Site URL: https://www.bauyu.com/homepage

I have successfully changed the title, body text to the font I want, but the navigation and drop-down menus are still unable to change the font.

I have tried the discussion methods linked below, but I still can't change it.

These are the answers I refer to :

https://forum.squarespace.com/topic/159028-71-nav-custom-font-css/page/2/

https://forum.squarespace.com/topic/172666-having-trouble-changing-fonts-with-css/

Below is the custom CSS code I am currently using:

Quote

 

@font-face {   
font-family: 'noto-serif-tc';   
src: url(https://static1.squarespace.com/static/586bbf709de4bb2b782126a6/t/62209e9853bc0b3ee4f27201/1646304941451/NotoSerifTC-Regular.otf), url(https://static1.squarespace.com/static/586bbf709de4bb2b782126a6/t/62209ebc4372a21074486f82/1646304964101/noto-serif-tc-v20-chinese-traditional-regular.woff), url(https://static1.squarespace.com/static/586bbf709de4bb2b782126a6/t/62209ee1a066944f3622165d/1646305000095/noto-serif-tc-v20-chinese-traditional-regular.woff2);}

h1 {
font-family: 'noto-serif-tc';}
h2 {
font-family: 'noto-serif-tc';}
h3 {
font-family: 'noto-serif-tc';}
body {
font-family: 'noto-serif-tc';}

.sqs-block-button-element {
  font-family: 'noto-serif-tc' !important;
}
.quote-block  {
  font-family: 'noto-serif-tc' !important;
}
.image-title-wrapper * {
  font-family: noto-serif-tc !important;
}
.image-subtitle-wrapper * {
  font-family: noto-serif-tc !important;
}

 

Thank you for your help!