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: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too.

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: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too.

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