Jump to content

loisartz

Member
 View Profile  See their activity

  • Posts

    35

  • Joined

  • Last visited

 Content Type 

Posts posted by loisartz

    Why custom CSS is not working?

    in Customize with code

    Posted

    23 minutes ago, Obi-Wan said:

    Ha! While the force is in and around all things, unfortunately, it doesn't reach the deep, dark catacombs of the SS devs thought to lie far beyond the edge of our known universe. Otherwise, I certainly would have gathered all of the midichlorians within me to force-fix the CSS Editor by now. 😆

    How is it possible that the problem is still not fixed? Its been like 3 days..

    Why custom CSS is not working?

    in Customize with code

    Posted

    7 hours ago, paul2009 said:

    @laurel The current technical issue ("bug) is preventing users from testing their Custom CSS whilst they are logged onto their website.

    If the CSS is formatted correctly and has been saved, it should work correctly when you are viewing the site from a second browser (or second browser window) but you'll need to refresh browser window after each change and you must be logged out of Squarespace in this second window.

    There can be any number of reasons why CSS isn't working, even in normal circumstances. For example, you may have a typo, missing bracket or a selector that isn't specific enough. If you'd like the community to help by taking a second look at the site, please provide a working link to the page on the site, details of what you are trying to achieve, and a screenshot of the part of the CSS that isn't working. We can then take a look.

    Was this post informative? Please give feedback by clicking an icon below  ⬇️

    Do you know when the problem will be fixed? It's been 3 days

    Why custom CSS is not working?

    in Customize with code

    Posted

    3 hours ago, paul2009 said:

    Squarespace have a status page but they only publish details of major outages,  they consider to be serious issues, connectivity outages, checkout failures and so on.

    I have created a thread where Circle members can share details of bugs and changes whenever they are discovered as well as fixes. As a Circle member, you'll find it here. 

     

    Do you know when the problem will be solved?

    When i go to edit the css code my scroll to top gets huge and my site explodes

    in Customize with code

    Posted · Edited by loisartz

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

    Pls help me ♥️♥️

    It won't let me edit the code and everything appears small

    image.thumb.png.4d8eedffd3b983a0cf501640fec106f2.png

    image.thumb.png.efb6a8b6d88c25203b9a9e43f3b4aa3b.png

     

     

    This is my CSS code:

    //COLOR NAGORI
    #block-yui_3_17_2_1_1649368455652_1939 h4{
      font-size: 25px !important;
      font-weight:500;
      line-height:1.6;
    }
    #block-yui_3_17_2_1_1649368455652_1939 h2{
      font-weight:700;
    }

    // QUITAR PADDING BLOQUE IMAGENES //
    .gallery-grid[data-width="full"]{
      padding-top:0px !important;
      padding-bottom:10px !important;
    }


    p{
      font-size:19px !important
    }


    :not(.has-background) .section-background {
      background-color: black;
    }

    .page-section.has-background.black-bold .section-background-overlay {
      background-color: black !important;
    }


    // TÍTULOS Y SUBTITULOS PORTFOLIO //
    // TÍTULOS 
    h3.portfolio-title {
        color: white !important;
        font-size: 37px !important;
    }

    // SUBTÍTULOS 
    a.grid-item[href*="/nagori"] h3:after {
        content: "Identidad corporativa y publicidad exterior";
      font-size:22px !important;
      font-weight:400 !important;
      display: block;
      margin-top:-7px;
    }


    a.grid-item[href*="/maverick"] h3:after {
        content: "Identidad corporativa y diseño de ropa";
      font-size:22px !important;
      font-weight:400 !important;
        display: block;
        margin-top:-7px;
    }


    a.grid-item[href*="/spino"] h3:after {
        content: "Identidad corporativa y packaging";
      font-size:22px !important;
      font-weight:400 !important;
        display: block;
        margin-top:-7px;
    }


    a.grid-item[href*="/nulk"] h3:after {
        content: "Identidad corporativa y packaging";
      font-size:22px !important;
      font-weight:400 !important;
        display: block;
        margin-top:-7px;
    }


    a.grid-item[href*="/loisartz"] h3:after {
        content: "Rediseño de marca";
      font-size:22px !important;
      font-weight:400 !important;
        display: block;
        margin-top:-7px;
    }


    a.grid-item[href*="/keyesp"] h3:after {
        content: "Identidad corporativa y packaging";
      font-size:22px !important;
      font-weight:400 !important;
        display: block;
       margin-top:-7px;
    }


    a.grid-item[href*="/burger-point"] h3:after {
        content: "Identidad corporativa y packaging";
      font-size:22px !important;
      font-weight:400 !important;
        display: block;
        margin-top:-7px;
    }


    a.grid-item[href*="/amigos"] h3:after {
        content: "Identidad corporativa y publicidad exterior";
      font-size:22px !important;
      font-weight:400 !important;
        display: block;
        margin-top:-7px;
    }


    a.grid-item[href*="/ravegraphics"] h3:after {
        content: "Identidad corporativa y publicidad exterior";
      font-size:22px !important;
      font-weight:400 !important;
        display: block;
        margin-top:-7px;
    }


    a.grid-item[href*="/la"] h3:after {
        content: "Diseño de etiqueta de vino";
      font-size:22px !important;
      font-weight:400 !important;
        display: block;
        margin-top:-7px;
    }

    // COLOR SUBRALLADO //

    ::selection {
      background: #ffcc00;
      color: black;
    }
    ::-moz-selection {
      background: #ffcc00;
      color: black;
    }

    // VIDEO FULLSCREEN

    // CAMBIAR SECTION ID
    section[data-section-id="61f21bdeb945a86ac53fae84"] {
    overflow-x: hidden !important;
    overflow-y:hidden !important;
    }

    // CAMBIAR SECTION ID
    section[data-section-id="61f21bdeb945a86ac53fae84"] {
    .content-wrapper  {
      padding: 0px !important;
      margin: 0px auto;
      display: contents;
      }
    .sqs-layout .sqs-row .sqs-block {
      padding-bottom: 0px !important;
      padding-top: 0px !important;
      padding-left:70px !important;
      padding-right:70px !important;

    }
    }

    // FOOTER COLOR Y HOVER
    // CONTACTO
    #block-4161d7d9918bec7e4b56 a{
      color:white !important;
    }

    // SOCIAL
    #block-2f1e4a6bc297d4791aed a{
      color:white !important;
    }


    // BOTON FORMULARIO / CONTACTO
    .form-wrapper input[type="submit"] {
     display: block;
     background: #aaa;
     color: #aaa;
     border: none;
     padding: 15px 30px;
     -moz-border-radius: 3px !important;
     border-radius: 3px !important;
     cursor: pointer;
    }


    #block-yui_3_17_2_1_1630643860064_2067 .sqs-block-button-element{
     border-radius: 3px !important;
       padding: 20px 30px;
    } 


    // TAMAÑO HÁBLAME DE TU PROYECTO PRESUPUESTO // 
    #block-bbeaa53fabbbab3234b4 h1{
      font-size:35px !important;
    }

    // TAMAÑO HABLAME DE TU PROYECTO PRESUPUESTO MÓVIL // 
    @media only screen and (max-width: 640px) {
      section[data-section-id="61e049ff913249525df89ca0"] #block-bbeaa53fabbbab3234b4
    h1{
      font-size: 30px !important;
      }} 

    // TAMAÑO SOBRE MI // 
    #block-518d78bd18dcf29d846a h1{
      font-size:35px !important;
    }

    // TAMAÑO SOBRE MI MÓVIL // 
    @media only screen and (max-width: 640px) {
      section[data-section-id="6139489c2fbf8d0c8b6c794e"] #block-518d78bd18dcf29d846a
    h1{
      font-size: 30px !important;
      }} 

    // TAMAÑO CONTACTO // 
    #block-19e384012ffd968bb766 h1{
      font-size:35px !important;
    }

    // TAMAÑO CONTACTO MÓVIL // 
    @media only screen and (max-width: 640px) {
      section[data-section-id="614efe36c2965710d90d2881"] #block-19e384012ffd968bb766
    h1{
      font-size: 30px !important;
      }} 


    // TAMAÑO DISEÑO PARA OFRECER LAS MEJORES SOLUCIONES A TU PROYECTO // 
    #block-70c3b321d4b3f8609268 h1{
      font-size:35px !important;
    }

    // TAMAÑO DISEÑO PARA OFRECER LAS MEJORES SOLUCIONES A TU PROYECTO MÓVIL // 
    @media only screen and (max-width: 640px) {
      section[data-section-id="612a4e8a872b897175ab49f0"] #block-70c3b321d4b3f8609268
    h1{
      font-size: 30px !important;
      }} 

    // TAMAÑO FUENTE LOISARTZ // 
    #block-a57198ea4f1567ba5b3c 
    h3{
      font-size: 160px !important;
    }


    // TAMAÑO FUENTE LOISARTZ MOVIL // 
    @media only screen and (max-width: 640px) {
      section[data-section-id="61b9fdb6b7490056df64d60b"] #block-a57198ea4f1567ba5b3c 
    h3{
      font-size: 80px !important;
      }} 
      


    //BORDE FORM
    .form-wrapper .field-list .field .field-element { 
    background: black; 
    border: 1px solid #FFFFFF;
      border-radius:3px;

    }

    // Form Required Symbol //

    div.title, label.title, span.required {
         display: none;
     }


    //QUITAR LOS SUBRALLADOS GENERAL
    .sqs-block-html a {background-image:none!important;}
    .sqs-block-html h1 a, h2 a, h3 a, h4 a, p a a{
     border-bottom-style: none !important;  text-decoration-line: none !important;
    }


    //BARRA BLANCA FORM
    body{
      background-color: black !important;
    }


    //FONDO FORM
    .form-wrapper .field-list input:focus, .form-wrapper .field-list textarea:focus {
        background: black !important;
    }

    //FUENTE FORM
     form {}
    form input[type="text"],
    form textarea {
    font-size:19.2px !important;
      color:white !important;
      font-family:Poppins !important;
    }

    //QUITAR LINEA FORM
    .form-wrapper .field-list .field .field-element:active, .form-wrapper .field-list .field .field-element:focus {outline: transparent}

    // Highlighted Field Form // 

    .field-list .field-element:focus, .field-element:visited{
        border-color: white !important;
      }
      .field-list select:focus{
        outline-color:  white !important;
      }
      .field-list .section{
        border-color: white !important;
      }


    //MUCHO MAS QUE UN CAMBIO DE LOGO
    #block-c9a225d113c7bf92fbe9 h1{
      font-size:45px !important;
    }


    /* WIDTH MOVIL */
    @media screen and (max-width:767px) {
    html, body {
        overflow-x: hidden;
    }
    }

    #block-6147026ff3af1204826bce3d h3{
      font-size:220px !important;
    }


    #block-6147070ef3af1204826bf498 h3{
      font-size:120px !important;
    }

    //LOGO SVG
    /* Hide the normal logo */
    .header-title-logo img, .header-mobile-logo img {
      visibility: hidden !important;
    }

    /* Set background image to be the SVG logo */
    .header-title-logo a, .header-mobile-logo a{
      /* Change the "left" below to "center" or "right" if you want the logo positioned in the middle or on the right */
      background: url("https://static1.squarespace.com/static/612a3160fd5f745335fe9fe4/t/61e4a67de8f08e6ac344c3cf/1642374781227/logo+svg+blanco.svg") no-repeat left center !important;
      background-size: contain !important;
    }


    /*burger menu thickness*/

    .top-bun, .patty, .bottom-bun {
      height: 3px !important;
    }


    // BROWSER SCROLL BAR

    ::-webkit-scrollbar {
        width: 0px; 
      /* Scrollbar Thickness */
    }
     
    ::-webkit-scrollbar-thumb {
        background: white; /* Scrollbar Color */
        border-radius: 0px;
      /* Rounded Corners */
      
    }
      
      ::-webkit-scrollbar-track {
        background: black; 
        /* Background Color */
    }


    //PORTFOLIO MOVIL
    //TÍTULOS MOVIL
    @media only screen and (max-width: 640px) {h3.portfolio-title {
        color: white !important;
        font-size: 28px !important;
      }}

    //SUBTÍTULOS MOVIL
    @media only screen and (max-width: 640px){
    a.grid-item[href*="/nagori"] h3:after {
        content: "Identidad visual y diseño de marca";
      font-size:21PX !important;
      font-weight:400 !important;
      display: block;
      margin-top:-1px;
    }}


    @media only screen and (max-width: 640px){a.grid-item[href*="/maverick"] h3:after {
        content: "Identidad visual y diseño de marca";
      font-size:21PX !important;
      font-weight:400 !important;
        display: block;
        margin-top:-1px;
      }}


    @media only screen and (max-width: 640px){a.grid-item[href*="/spino"] h3:after {
        content: "Identidad visual y diseño de marca";
      font-size:21PX !important;
      font-weight:400 !important;
        display: block;
        margin-top:-1px;
      }}


    @media only screen and (max-width: 640px){a.grid-item[href*="/nulk"] h3:after {
        content: "Identidad visual y diseño de marca";
      font-size:21px !important;
      font-weight:400 !important;
        display: block;
        margin-top:-1px;
      }}


    @media only screen and (max-width: 640px){
    a.grid-item[href*="/loisartz"] h3:after {
        content: "Rediseño de marca";
      font-size:21px !important;
      font-weight:400 !important;
        display: block;
        margin-top:-1px;
      }}


    @media only screen and (max-width: 640px){a.grid-item[href*="/keyesp"] h3:after {
        content: "Identidad visual y diseño de marca";
      font-size:21px !important;
      font-weight:400 !important;
        display: block;
       margin-top:-1px;
      }}


    @media only screen and (max-width: 640px){a.grid-item[href*="/burger-point"] h3:after {
        content: "Identidad visual y diseño de marca";
      font-size:21px !important;
      font-weight:400 !important;
        display: block;
        margin-top:-1px;
      }}


    @media only screen and (max-width: 640px){a.grid-item[href*="/amigos"] h3:after {
        content: "Identidad visual y diseño de marca";
      font-size:21px !important;
      font-weight:400 !important;
        display: block;
        margin-top:-1px;
      }}


    @media only screen and (max-width: 640px){
    a.grid-item[href*="/ravegraphics"] h3:after {
        content: "Identidad visual y diseño de marca";
      font-size:21px !important;
      font-weight:400 !important;
        display: block;
        margin-top:-1px;
      }}


    @media only screen and (max-width: 640px){
    a.grid-item[href*="/la"] h3:after {
        content: "Diseño de etiqueta de vino";
      font-size:21px !important;
      font-weight:400 !important;
        display: block;
        margin-top:-1px;
      }}


    @media only screen and (max-width: 640px){
    a.grid-item[href*="/mostra"] h3:after {
        content: "Diseño de carteles";
      font-size:21px !important;
      font-weight:400 !important;
        display: block;
        margin-top:-1px;
      }}


    @media only screen and (max-width: 640px){
    a.grid-item[href*="/anuncios"] h3:after {
        content: "Identidad visual y diseño de marca";
      font-size:21px !important;
      font-weight:400 !important;
        display: block;
        margin-top:-1px;
      }}


    // TAMAÑOS MOVIL

    //TITULOS PAGINA WEB
    @media only screen and (max-width: 640px) {
       h1 { font-size: 25px !important; }
    }

    //TAMAÑO ENCABEZADO SECCION
    @media only screen and (max-width: 640px) {
       h2 { font-size: 25px !important; }
    }

    @media only screen and (max-width: 640px) {
       h3 { font-size: 20px !important; }
    }

    @media only screen and (max-width: 640px) {
       h4 { font-size: 20px !important; }
    }

    // Mobile Paragraph Sizes //

    //TAMAÑO PARRAFO HOME
    @media only screen and (max-width: 640px) {
       .sqsrte-large { font-size: 18px !important; }
    }

    //TAMAÑO PARRAFO HOME
    @media only screen and (max-width: 640px) {
       p { font-size: 18px !important; }
    }

    @media only screen and (max-width: 640px) {
       .sqsrte-small { font-size: 12px !important; }
    }

    // Mobile Monospace Sizes //

    @media only screen and (max-width: 640px) {
       pre { font-size: 12px !important; }
    }

    //QUITAR LOS SUBRALLADOS GENERAL
    a {
    text-decoration: none !important;
    }

    //QUITAR LOS SUBRALLADOS DEL HEADER
    header a {
    background-image: none !important;
    }


    // SCROLL TO TOP //
    html {
      scroll-behavior:smooth
    }

    #back-to-top{
      height:50px;
      width:50px;
      position:fixed;
      right:0;
      z-index:99;

      border-radius:50%;
      box-shadow: 0px 0px 0px #ccc;
      margin:30px;
      background:white;

      /*Position Out of View*/
      bottom:-150px;
      opacity:0;
      transition: all .5s ease;
    }
    #back-to-top.show-btt{
      /*Position In View*/
      bottom:0;
      opacity:1;
      transition: all .5s ease;
    }

    html, body {overflow-x: hidden;}

     

    This is my header injection code:

    <a id="back-to-top">
      <img src="data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' aria-labelledby='title' aria-describedby='desc' role='img' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EAngle Up%3C/title%3E%3Cdesc%3EA line styled icon from Orion Icon Library.%3C/desc%3E%3Cpath data-name='layer1' fill='none' stroke='%23202020' stroke-miterlimit='10' stroke-width='2' d='M20 40l11.994-14L44 40' stroke-linejoin='round' stroke-linecap='round'%3E%3C/path%3E%3C/svg%3E" alt="Angle Up" />
    </a>


    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script>
      $(function(){
        //Function To Add Class
        function showBackToTop(){
          $('#back-to-top').addClass('show-btt');
        }

        //Function To Add Class
        function hideBackToTop(){
          $('#back-to-top').removeClass('show-btt');
        }

        //Check Scroll and Add Class
        function checkScrollPos(){
          if ($(this).scrollTop() >= 700) { //if scroll position is lower than 700px from the top of the screen
            showBackToTop();
          } else {
            hideBackToTop()
          }
        }
        
        // Scroll to the top when the button is clicked
        $('#back-to-top').click(function(){$(window).scrollTop(0)});

        // tell the browser to run the "checkScrollPos()" function just above when the user scrolls
        $(window).on('scroll', function(){ 
          checkScrollPos();
        });
        //Check the scroll position once when the page loads
        checkScrollPos();
      })
    </script>

    And this is my footer injection code:

    <script>
      $( ( ) => {
        
       $( 'body' ).prepend ( '<div class="cursor cursor-dot" style="left: 0px; top: 0px;">' );
        
        var cursor = $(".cursor");
        
        $( window ).mousemove ( function ( e ) {
          cursor.css ( {  
                   top: e.clientY,
                left: e.clientX 
            } );   
          } );
        

        $( window ).mousemove ( function ( e ) {
          $( 'a' ).on ( 'mouseenter', function ( ) { 
            cursor.addClass ( 'active' );
            } );
          } ); 
        
        $( window ).mousemove ( function ( e ) {
          $( 'a' ).on ( 'mouseleave', function ( ) {
            cursor.removeClass ( 'active' );
            } );
          } );
        } );
        
      </script>

     

     

     

    If I move the mouse outside the web the custom cursor stays fixed on top

    in Customize with code

    Posted · Edited by loisartz

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

    I want to make that when I take the cursor out of my website, the normal cursor is put on, not my custom one. And that the transition between custom mouse and normal mouse is fluid, that it does not remain fixed at the top

    This is the code:

    CSS

    // CUSTOM CURSOR // 
    * {
      cursor: none;
      }

    .cursor {
      --size: 20px;
      height: var( --size );
      width: var( --size );
      border-radius: 50%;
      pointer-events: none;
      position: fixed;
      transform: translate( -50%, -50% );
      z-index: 99999999999;
      
      }

    .cursor.cursor-dot {
      background: #016cff; /* This defines the color of the cursor */
      transition: width 0.2s, height 0.2s, background-color 0.2s;
      transition-timing-function: ease-out;
      }

    .cursor-dot.active {
      --size: 48px; 
      background-color: #aaaaaa;
      opacity: 0.5;
      }

    CODE INJECTION:

    <script>
      $( ( ) => {
        
       $( 'body' ).prepend ( '<div class="cursor cursor-dot" style="left: 0px; top: 0px;">' );
        
        var cursor = $(".cursor");
        
        $( window ).mousemove ( function ( e ) {
          cursor.css ( {  
                   top: e.clientY,
                left: e.clientX 
            } );   
          } );
        

        $( window ).mousemove ( function ( e ) {
          $( 'a' ).on ( 'mouseenter', function ( ) { 
            cursor.addClass ( 'active' );
            } );
          } ); 
        
        $( window ).mousemove ( function ( e ) {
          $( 'a' ).on ( 'mouseleave', function ( ) {
            cursor.removeClass ( 'active' );
            } );
          } );
        } );
        
      </script>

    Like this website: https://www.estevedurba.com/

    Pls help me.

    Thanks! ❤️

     

    image.thumb.png.b66e8c0ef6aaa1122b8746d4743a44c5.png

    Adding a subtitle to a title to thumbnails in portfolio grid

    in Customize with code

    Posted

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

    Hi all,
    I have a problem, I have set the animation of the site in flexible. When I reload like 3 times the page an error occurs that causes the title and subtitle to be mixed.

    I have used span to separate title and subtitle of the project.

    image.png.a9ddf6d00e52b4731c2a406b7ee12aae.png

    image.thumb.png.1a4fb456b2bceeed1a85195dc16b1d87.png

    This is the code:

    CODE INJECTION

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
      $("h3.portfolio-title").each(function(){
        $(this).html($(this).text());
      });
    });
    </script>

    CSS

    h3.portfolio-title span {
        display: block;
        font-size: 21px;
      font-weight: 10 !important;
      margin-top:-6px
        
    }
    h3.portfolio-title {
        font-size: 33px !important;
        font-weight: medium !important;
        color: white !important;
    }

     

    And it should always come out like this

    image.thumb.png.7c8b43d1c13dd7a066840adde9896b5d.png

    How can I solve it?

    Thanks a lot ♥♥

    Adding descriptions to portfolio grid layouts in 7.1

    in Customize with code

    Posted

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

    Hi all,
    I have a problem, I have set the animation of the site in flexible. When I reload like 3 times the page an error occurs that causes the title and subtitle to be mixed.

    I have used span to separate title and subtitle of the project.

    image.png.a9ddf6d00e52b4731c2a406b7ee12aae.png

    image.thumb.png.1a4fb456b2bceeed1a85195dc16b1d87.png

    This is the code:

    CODE INJECTION

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
      $("h3.portfolio-title").each(function(){
        $(this).html($(this).text());
      });
    });
    </script>

    CSS

    h3.portfolio-title span {
        display: block;
        font-size: 21px;
      font-weight: 10 !important;
      margin-top:-6px
        
    }
    h3.portfolio-title {
        font-size: 33px !important;
        font-weight: medium !important;
        color: white !important;
    }

     

    And it should always come out like this

    image.thumb.png.7c8b43d1c13dd7a066840adde9896b5d.png

    How can I solve it?

    Thanks a lot ♥♥

    Adding subtitle to Portfolio Grid Thumbs

    in Customize with code

    Posted · Edited by loisartz

    Web: https://www.loisartz.com/

    Hi all,
    I have a problem, I have set the animation of the site in flexible. When I reload like 3 times the page an error occurs that causes the title and subtitle to be mixed.

    I have used span to separate title and subtitle of the project.

    image.png.a9ddf6d00e52b4731c2a406b7ee12aae.png

    image.thumb.png.1a4fb456b2bceeed1a85195dc16b1d87.png

    This is the code:

    CODE INJECTION

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
      $("h3.portfolio-title").each(function(){
        $(this).html($(this).text());
      });
    });
    </script>

    CSS

    h3.portfolio-title span {
        display: block;
        font-size: 21px;
      font-weight: 10 !important;
      margin-top:-6px
        
    }
    h3.portfolio-title {
        font-size: 33px !important;
        font-weight: medium !important;
        color: white !important;
    }

     

    And it should always come out like this

    image.thumb.png.7c8b43d1c13dd7a066840adde9896b5d.png

    How can I solve it?

    Thanks a lot ♥♥

    Problem with animation portfolio grid subtitles

    in Customize with code

    Posted · Edited by loisartz

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

    Hi all,
    I have a problem, I have set the animation of the site in flexible. When I reload like 3 times the page an error occurs that causes the title and subtitle to be mixed.

    I have used span to separate title and subtitle of the project.

    image.png.a9ddf6d00e52b4731c2a406b7ee12aae.png

    image.thumb.png.1a4fb456b2bceeed1a85195dc16b1d87.png

    This is the code:

    CODE INJECTION

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
      $("h3.portfolio-title").each(function(){
        $(this).html($(this).text());
      });
    });
    </script>

    CSS

    h3.portfolio-title span {
        display: block;
        font-size: 21px;
      font-weight: 10 !important;
      margin-top:-6px
        
    }
    h3.portfolio-title {
        font-size: 33px !important;
        font-weight: medium !important;
        color: white !important;
    }

     

    And it should always come out like this

    image.thumb.png.7c8b43d1c13dd7a066840adde9896b5d.png

    How can I solve it?

    Thanks a lot ♥♥

    image.png

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources