Jump to content

Code block items moving on different desktops

Recommended Posts

Site URL: https://olive-copper-nxmd.squarespace.com/

Hello!

I have been working on a site for my employer, I was provided a lot of content for each section and so I decided to put this in a code block with two boxes that slightly overlap and flip in side and colour on each section.

On my device, and my colleague also using a macbook, it looks fine (minus a few unfinished adjustments).

However, when my manager looked at the site it looked very different. I checked the browser zoom was set to default, but its an issue for all colleagues on windows desktop.

Is this just whilst the site isnt live,  or will the site display differently for windows desktops? If so, how do i fix this?

Of course the sections were messed up on mobile, but i am using media query to replace these with reformatted duplicates which is working fine. Just not sure why mac laptop and windows pc look so different, but i assume this is screen size rather than mac/windows.

Attached is a screenshot from my browser, vs a screenshot from one of my colleagues. (You'll notice my colleague screenshot a different section, which is because for some reason the first one is fine for them. But the replica sections (when they flip over and. change colour) are having the issue.

I have also attached a screenshot of what i see on that section. Note the text weight seemed to have changed for me too, not sure why...
Theres 6 sections in total following this style, and will be a further 9 across other pages.


Here is the code for the first one, which is a non issue:

 

<div id= "ServiceNow Platform and Integration SN COE">

<div style="background-color: hsla(154, 27%, 63%, 0.99);
            opacity: 1;
 position: relative;
  top: -180px;
  left: -100px;
  width: 70%;
  height: 800px;
            border-right: 0px solid hsla(154, 27%, 63%, 0.99);
            padding: 30px;
            border-radius: 0px;
            box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.30);">

<h4 style="color: #000000; weight: bold; position: relative; top: 20px; left: 40px; padding: 30px; width: 50%;">

Customer Problem.
</h4>


<p>
<span style="color: #000000; position: absolute; top: 100px; padding: 30px; left: 70px; width: 50%; font-size: 18px; "">


Many customers design their ESM processes in silos, the Change Management team define the Change process, the Incident Management Team the same; however while those processes may operate effectively – the interaction between them is often forgotten about.

<br><br>

A failed Change may result in an Incident (or even a Major Incident), conversely an Incident may require a Change to remediate the issue – but without understanding how these two need to operate together a huge amount of time, effort and ability to accurately understand the impact or root cause is often not possible.

<br><br>

Once the root cause is identified, where does that information get stored – Incident needs to link with Knowledge Management so that it doesn’t happen again, Change needs to be informed of ‘why’ so that future Changes don’t repeat the same issue.

</p>

</div>


<div style="background-color: hsla(214, 0%, 0%, 0.99);
            opacity: 1;
 position: absolute;
  top: -50px;
  right: -100px;
  width: 60%;
  height: 500px;
            border-right: 0px solid hsla(154, 27%, 63%, 0.99);
            padding: 30px;
            border-radius: 0px;
            box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.30);">

<h4 style="color: #ffffff; weight: bold; position: relative; top: -15px; left: 0px; padding: 30px;">

CSX Capability..
</h4>


<p>
<span style="color: #ffffff; position: absolute; top: 70px; padding: 30px; left: 30px; width: 80%; font-size: 18px; "">

Our approach is different.

Starting with defining the requirements and needs for each distinct ESM process, aligning where appropriate to ITIL V4 model, this is enhanced by then providing cross-process architecture to define a set of required inputs and outputs or ‘hand-offs’ that are mapped against any other ESM process, these include items such as tool usage, data requirements, access, security needs and communication between the people operating the processes. 

<br><br>

Once identified, the hand-offs are discussed and an updated design is defined to ensure each can work successfully with its partner process and ensure a complete and holistic view of end-to-end Service Management.
These powerful inter-connects between the processes enables organisations to reduce errors, increase service availability and identify very quickly areas that require additional attention or remediation.



Here is the code for the one that is causing an issue (but not on my screen).

 

<div id= "ServiceNow Platform and Integration SN COE">

<div style="background-color: hsla(154, 27%, 63%, 0.99);
            opacity: 1;
 position: relative;
  top: -120px;
  left: 500px;
  width: 60%;
  height: 800px;
            border-right: 0px solid hsla(154, 27%, 63%, 0.99);
            padding: 30px;
            border-radius: 0px;
            box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.30);">

<h4 style="color: #000000; weight: bold; position: relative; top: +15px; left: 250px; padding: 30px; width: 50%; ">

CSX Capability..
</h4>


<p>
<span style="color: #000000; weight: normal; position: absolute; top: 110px; padding: 30px; left: 285px; width: 50%; font-size: 14px; "">

CSX promote the concept of a single point of truth (SPOT) for IT configuration and asset data.  Modern tech (ie ServiceNow) means an automated solution is now possible which reduces the reliance on manual updates, and ensures a comprehensive view.  ITIL’s Service Asset and Configuration Management processes can be largely automated, with workflow and ties to access control systems to ensure accountability and service ownership.   
<br>We focus on creating a CMDB structured on the Customer Service Data Model (CSDM). 
  <br><br>
  The data and relationships are husbanded through: <br>
  1) automated discovery of devices and applications, 
  <br>2) managed processes for the creation and maintenance of services and products, 
  <br>3) controls and reporting to drive compliance and performance.
<br>
<br>The benefits of a reliable, integrated CMDB are enormous:  Operational Resilience planning; reducing MTTR; improved control of assets; managing technical debt, reducing impact of failed changes/releases and staying ahead of the regulatory auditors demands.  In addition, the opportunities for automation are increased dramatically as orchestration of workflow can be driven from valid, trusted data.
<br><br>
Key Elements managed by CSX: ServiceNow ITOM Implementation, Discovery Implementation, Service Mapping, 
Establish Data model (ie CSDM), IT Controls Dashboards to drive compliance and  – describe why important to get this agreed and how it relates to business activities.  As with all process and technology improvements, strong comms and training of client stakeholders is an important success factor in adoption. 


</p>

</div>


<div style="background-color: hsla(214, 0%, 0%, 0.99);
            opacity: 1;
 position: relative;
  top: -900px;
  left: -90px;
  width: 60%;
  height: 635px;
            border-right: 0px solid hsla(154, 27%, 63%, 0.99);
            padding: 30px;
            border-radius: 0px;
            box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.30);">

<h4 style="color: #ffffff; weight: bold; position: relative; top: -15px; left: 10px; padding: 30px;">

Customer Problem.
</h4>


<p>
<span style="color: #ffffff; position: absolute; top: 80px; padding: 30px; left: 40px; width: 80%; font-size: 18px; "">


For years, clients have seen the CMDB as a pink unicorn that is unobtainable.  Data was not trusted, there was little ownership, and accountability was very hard to pin down.  

<br><br>

To meet their needs for financial, service, procurement, regulatory, audit and even security purposes, they cobbled together lists and ran physical and virtual scans.  They kept spreadsheets and registers and pulls from monitoring tools and bespoke apps and more scans.  

<br><br>

There has been very little clarity and an incredible amount of risk piling up around this space.  

<br><br>
Today, many firms are feeling the wrath of the regulator, resulting in career-limiting findings and in, more than a few cases, massive fines.

</p>

</div>
</div>

Screenshot 2022-01-19 at 09.33.23.png

Screenshot 2022-01-19 at 09.35.07.png

Screenshot 2022-01-19 at 09.45.25.png

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

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

Hire a Designer

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