Jump to content

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

By loisartz, in Customize with code

Recommended Posts

loisartz Level 4

loisartz

Posted
Posted (edited)

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>

 

 

 

Edited by loisartz
Link to comment
  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

paul2009
paul2009

The URL changed 😬. I've updated it. Squarespace only post serious issues on the status page. 

Posted Images

paul2009 Level 17

paul2009

Posted
Posted (edited)
On 4/16/2022 at 3:56 PM, loisartz said:

The css don't work when i click to edit

There's currently a bug with Custom CSS in preview, and this could be affecting what you see. Please take a look at this thread:

 

Edited by paul2009
Corrected URL

About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!
If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.
Improve your online store with our extensions.

Link to comment
paul2009 Level 17

paul2009

Posted
Posted

The URL changed 😬. I've updated it.

Squarespace only post serious issues on the status page. 

About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!
If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.
Improve your online store with our extensions.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign Up / Login
Go to topic listing

News

×
×
  • 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