Jump to content

cpcn

Member
  • Posts

    12
  • Joined

  • Last visited

Posts posted by cpcn

  1. Hey!

    So I have two questions and I'm going to post them both to save spamming the forum. My website is: http://choypingclarkeng.com/

    1: I want to make the Chinese text on this page into a different font/size etc. You can see it also isn't really in line with the English text either. https://www.choypingclarkeng.com/theatremaking/wwww

    Screenshot(82).thumb.png.e311539dec870970b82000158e6e741b.png

     

    2: On my Mac, the font I want for the main links shows up for the Chinese text. I've adjusted this in code injection to make it look right.

    Screenshot2023-12-24at14_12_19.thumb.png.f48c14ba53b91af8b320143451c3d7a5.png

    However on my Windows laptop and Android phone, the Chinese text is in a different font/size/etc.

    Screenshot(81).thumb.png.20f4edc427a1b647c80a9489f5521752.png

    And on my Android:

    WhatsAppImage2023-12-24at2_28_01PM.thumb.jpeg.e6e1f3990e03decc84772269e8a5609b.jpeg

    Is there a way to fix this so it will look like the style I want? It's really annoying! Thank you.

  2. How to make the gap between these links smaller? I've tried adjusting in several ways but can't seem to get the gap smaller than it is currently. For reference my site URL is: http://choypingclarkeng.com/

    Thanks!

    This is what my custom CSS looks like:

     

    .portfolio-hover-items {
        padding-top: 130px !important; /* Set the padding-top to 130px */
    }

    body {
        font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif
    }

    @font-face {
    font-family: 'PEARL';
    src: url('https://static1.squarespace.com/static/6058a6f3664b9e2e27456e5c/t/6579c8844285d33df676dfe1/1702480005051/TAN-PEARL.ttf');
     } 

    h1, h2 {
      font-family: 'PEARL';
    }

    span.portfolio-hover-item-content {
      font-size: 45px;
      font-family: 'PEARL'
    }

    //DESKTOP//
    @media only screen and (min-width: 768px) {
        .portfolio-hover[data-horizontal-align="center"][data-mode="hover-cover"] .portfolio-hover-item-title {
            padding: 0.01em; /* Apply the padding adjustment */
        }
    }

    //MOBILE//
    .header-menu-nav-item a {
      font-size: 30px;
      margin: 4rem 0;
      font-family: 'PEARL'
    }

    .header-layout-nav-right .header-nav {
    text-align: center;
    }

    span.portfolio-hover-item-content {
      font-size: 40px;
      line-height: 1px;
    }

    screenshot.png

  3. 2 hours ago, tuanphan said:

    Add this code to Website Tools (under Not Linked) > Code Injection > Footer

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <script>
      $("span.portfolio-hover-item-content:contains('遊遊野野')").html(function(_, html) {
       return html.replace(/(遊遊野野)/g, '<span class="chinese">$1</span>');
    });
    </script>
    <style>
      span.chinese {
        font-family: 'PEARL' !important;
        color: #f1f !important;
    }
    </style>

    image.thumb.png.c6075426cbf8630fc1b37f06e437453f.png

    Sorry I have one more question as well as the above - how to change the Chinese font on this page? Again for the characters 

    遊遊野野
     

    https://www.choypingclarkeng.com/theatremaking/wwww

  4. Hi there!

     

    How can I change just the font of the Chinese characters after WANDER WANDER WILD WILD? On both my navigation page and page for the project, the Chinese font is default to the last one I used before customising. I would like to be able to change to another font that looks more like the website title. I had to use a .png to create that but am struggling with changing them here...

     

    This is currently my CSS - I am only new to this so any help is appreciated:

     

    /* Fix portfolio */
    body.homepage article section:first-child {
        padding-top: 0 !important;
    }

    @font-face {
    font-family: 'PEARL';
    src: url('https://static1.squarespace.com/static/6058a6f3664b9e2e27456e5c/t/6579c8844285d33df676dfe1/1702480005051/TAN-PEARL.ttf');
     } 

    h1, h2, h3, h4 {
      font-family: 'PEARL';
    }

    span.portfolio-hover-item-content {
      font-size: 45px;
      font-family: 'PEARL'
    }

    //DESKTOP//
    .header-nav-item a {
      font-size: 20px;
      font-family: 'PEARL'
    }

    main-nav ul li.active-link a,

    .main-nav ul li.active-link a:visited {
         border-bottom: 50px solid #000000;
     }

    //MOBILE//
    .header-menu-nav-item a {
      font-size: 30px;
      margin: 4rem 0;
      font-family: 'PEARL'
    }

    .header-layout-nav-right .header-nav {
    text-align: center;
    }

    Screenshot 2023-12-13 at 16.22.51.png

    Screenshot 2023-12-13 at 16.27.55.png

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.