Fat_Bird_Creative

On 6/13/2024 at 8:07 PM, tuanphan said:

You can use this new CSS code

div.header-menu-bg.theme-bg--primary {
    background-color: transparent !important;
    background-image: url(https://content.invisioncic.com/p289038/monthly_2024_06/Power-Cleaning-Victoria_Mobile-Menu.jpg.ed382ebcd9c97105abfc2ee22c953b50.thumb.jpg.d354b798644438f270505aabf71a2e2e.jpg) !important;
}

 

This worked! 
Thank you @tuanphan

20 hours ago, Lesum said:

@Fat_Bird_Creative Please check your image. The image you used appears to be a transparent image. Or maybe try using a different image? 

The image I'm using is a jpeg, so it's not transparent. But I did try loading a different image and it still didn't work (even with the !important flag).

Heres the image:

On 6/10/2024 at 10:38 AM, Lesum said:

@Fat_Bird_Creative Try adding !important after the url of the background image:

 

Sorry, this didn't work either. It made it transparent for some strange reason. 

On 6/8/2024 at 2:07 AM, Beyondspace said:

Try the following selector to set CSS only live website

body:not(.sqs-edit-mode) {

}

 

Thanks, for the suggestion. but it didn't work.

I have a Mobile menu background added using CSS but it only works when I try to edit the custom CSS. I tried deleting all the other custom CSS to see if there was a cross-over or conflicting code, but it still did not work. 

URL: powercleaningvictoria.squarespace.com
Password: PCV2024
 

// Mobile Menu Background //
.header-menu-bg {
background: url(https://static1.squarespace.com/static/663d65fba845475004447526/t/665e931dce8e1a524296dcba/1717474078381/Power-Cleaning-Victoria_Mobile-Menu.jpg);
background-size: cover;
background-position: center;
}

//Mobile - Font colors//
.header--menu-open a{color:#cadfd8!important}
.header--menu-nav-item-active a{color:#cadfd8!important;}

I'd appreciate the help

23 hours ago, DavidStewart said:

Let me know how it goes. 

Yes that worked! Thank you so much. 

On 5/4/2024 at 1:39 AM, melody495 said:

Which buttons are not working?

Here I've circled the buttons I want to effect. I believe these are Squarespace buttons. The top two are my own code, and the bottom two are forms. 

Hello, I'm trying to change all of the colors of my buttons on hover using this code, but its not working for some reason. 
I know the buttons are being targeted because if I add a shadow, it shows.  So why aren't the colours changing?

Code:

.sqs-block-button-element:hover {
color: #fff !important;
 background-color: #5f295f !important;
}

URL: https://www.fatbirdcreative.co.nz/

Note: I have taken out all of my custom CSS and it still does not work. 

I too have just come across this issue. Bump

Thank you @tuanphan, you've done it again.

https://www.fatbirdcreative.co.nz/book-call

Sorry if this has been asked before, I tried searching but couldn't find the answer. 

I'm looking to replace the header mobile logo on this one page. I know how to do it on desktop but not mobile. 

Thanks @tuanphan you solved it! 

@tuanphan So sorry, I thought I did, but must have forgot to paste!
Its https://www.pocketdigital.online/

I have two questions, but they may be linked. 

First Question: I have a code block for a rotating "let's chat" on the home page. However, the circle distorts depending on the screen size. How do I lock it in a circle?

<a href="/contact"><center><img src="https://static1.squarespace.com/static/62a06f7de4500f5c95bd5f24/t/6434a57aada4621387b238a8/1681171834706/Pocket+Digital_LetsChat.png" class="rotate" width="170" height="170" />
</center></a>
<style>
  .rotate {
  animation: rotation 8s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(359deg);
  }
  to {
    transform: rotate(0deg);
  }
}
</style>

Second Question: Also on the home page, I have an ifram that pops out of the frame depending on the screen size (which results in it going over the textblock). How do I lock this down so it scales better?

 <iframe src="https://player.vimeo.com/video/818621743?h=79c21bc738" width="340" height="564" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>

@tuanphan Thanks Tuanphan, your amazing!

Hello, on my home page (https://www.fatbirdcreative.co.nz/) I have a text animation that cuts off the g. Does anyone know a code to extend the view box? 

Here is the code I'm using:

<html>
<head>
<style>
.button2{
  background-color: #00939f;
  border: none;
  color: white  !important;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 50px;
}

.button1{  
  background: -webkit-linear-gradient(to right, #66c0cc, #00939f);
  background: linear-gradient(to right, #66c0cc, #00939f) !important;
border: none;
  color: white  !important;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 50px;

  }

  .fadeIn
  {font-family: 'Snicker-Bold';
   margin: 1px;
   display: inline;

  }

  </style> 

</head>
<body>

<div class="sec-rev-data" style="background: #ffffff;
color:#000000; padding:40px; border-radius: 0px;">
  
<h1>Hi, I'm Fat Bird Creative –
a freelance graphic designer that creates <br>
<div class="fadeIn">
<span>branding</span>
<span>illustrations</span>
<span>logos</span>
<span>websites</span>
</h1>
<p></p>
<a href="/contact" class="button1">START A PROJECT ➜</a>
  <a href="/work" class="button2">VIEW WORK ➜</a>

</div>
</body>
</html>