How do I move this weather plugin with css

Im trying to move this plugin i found with css but for some reason the css isn't responding or there is some other conflict.

I want to move the Weather plugin to the top right corner of the website inline with the other header text.

here's my css for positioning the div.

.temp {
   position: fixed;
   width: 100px;
   top: 40px;
   left: 80%;
   font-size: 12px;
   }

And here's my html code block.

<div class="temp">
<a class="weatherwidget-io" href="https://forecast7.com/en/37d9823d73/athens/" data-font="Georgia" data-mode="Current" data-days="1" data-theme="original" data-basecolor="#fff" data-textcolor="#fff" data-highcolor="#367d23" data-lowcolor="#367d23" data-suncolor="#367d23" data-mooncolor="#367d23" data-cloudcolor="#367d23" data-cloudfill="#367d23" data-raincolor="#367d23" data-snowcolor="#367d23">Athens, Greece</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
</script>
</div>

Here's what it looks like on the website. PASSWORD: Juliahugo (Uppercase "J")

WEBSITE LINK password: Juliahugo

PLEASE HELP ME - THIS IS SO FRUSTRATING!

@heydanbrowne You should share site url. Easier to check.

Absolutely - I'll update it now.

UDPATED - Thanks - Please let me know what you think I'm using a very striped down version of the Jasper template

@heydanbrowne You mean: cloud, navigation and 33 degree to top right?

I'm really stumped as too why there's a conflict on the css - I would imagine that squarespace would spit back the script and not the css...

Thanks for helping me with the question - curious to know if you have any insights @taunphan

@heydanbrowne or like this?

@heydanbrowne

@heydanbrowne

.temp {
   position: fixed;
   right: 10vw;
   top: 0;
   width: 10%;
}

@tuanphan, For some reason i'm not able to comment on your initial reply anymore - I was able to achieve that on a seperate html test page like this ... (below) but when I try to copy over the same css, something goes wrong on squarespace and there is an error.

What I'm currently doing on my test page, is positioning the script with css - but there is an error on squarespace.

@tuanphan, For some reason i'm not able to comment on your initial reply anymore - I was able to achieve that on a seperate html test page like this ... (below) but when I try to copy over the same css, something goes wrong on squarespace and there is an error.

What I'm currently doing on my test page, is positioning the script with css - but there is an error on squarespace.

@heydanbrowne What error? Can you take screenshot?

Hey this worked but I realized what was wrong was that I shouldn't have put the styling in the page header injection. So my initial styling worked but i put it in the wrong place. Do you have any idea why page header injections wouldn't load css on this code block with a script? I havent encountered a problem like this before.

No not the navigation - navigation is supposed to be centered and is working properly the way i've styled it.

It should look something like this - but the css on the cloud/degree script are conflicting. In a separate html file i'm working from. I've gotten it to do what I've want and it's only occuring in squarespace.

Here is a sample image what I want it to look like, which i've achieved outside of squarespace on a test page. Only when I get it into squarespace it stops

THANK YOU @tuanphan . Really well done. Realising there's lot of other stuff wrong with my code with you're help.

@heydanbrowne You should insert all css in one place. Easy to manage & edit in future. I usually insert to Home > Design > Custom CSS

Hi did this solution work? I have similar problem with my 7.1 using code block.

As the code given by a third party they have not included position in the code itself. I am looking for the most functional way to control the position of my code blocks on big and small screens?

On 5/19/2020 at 2:28 PM, Bill_Judd said:

Hi did this solution work? I have similar problem with my 7.1 using code block.

As the code given by a third party they have not included position in the code itself. I am looking for the most functional way to control the position of my code blocks on big and small screens?

Can you share the code? I can take a look

Hi Tuanphan

Thanks for replying, please see code which I use for my code block:

<script src="https://widgets.mindbodyonline.com/javascripts/healcode.js" type="text/javascript"></script><healcode-widget data-version="0.2" data-link-class="loginRegister" data-site-id="94289" data-mb-site-id="665939" data-type="account-link" data-inner-html="Login | Register"  />

Would love to hear your thoughts

Best

Bill

On 5/20/2020 at 8:38 PM, Bill_Judd said:

Hi Tuanphan

Thanks for replying, please see code which I use for my code block:

<script src="https://widgets.mindbodyonline.com/javascripts/healcode.js" type="text/javascript"></script><healcode-widget data-version="0.2" data-link-class="loginRegister" data-site-id="94289" data-mb-site-id="665939" data-type="account-link" data-inner-html="Login | Register"  />

 

Would love to hear your thoughts

 

Best

Bill

Can you share link to page where you used this code?