HELP NEEDED PLEASE - Why is my code messing with my page?

  • 9 February 2018
  • 5 replies
  • 18 views

Hi Unbounce Community,

I am far from being a programmer, so I am seeking help as my page seems to have a problem.
According to support, this piece of code is the reason why the front end of my page doesn’t match the backend (only on mobile). But I can’t remove the code as it is used for a background effect.
Does anyone know if there is something wrong with this code? And maybe how I can fix this? I have so little knowledge in programming, this sounds out of reach to me…

Thanks in advance to whoever will be able to help! 🙂
Chloé, a very thankful Unbounce user

CSS script:

/* =============================================================================
HTML5 CSS Reset Minified - Eric Meyer
========================================================================== */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
li{list-style:none}


/* =============================================================================
   My CSS
   ========================================================================== */

/* ---- base ---- */

html,body{ 
	width:100%;
	height:100%;
	background:#111;
}

html{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body{
  font:normal 75% Arial, Helvetica, sans-serif;
}

canvas{
  display:block;
  vertical-align:bottom;
}


/* ---- stats.js ---- */

.count-particles{
  background: #000022;
  position: absolute;
  top: 48px;
  left: 0;
  width: 80px;
  color: #13E8E9;
  font-size: .8em;
  text-align: left;
  text-indent: 4px;
  line-height: 14px;
  padding-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
}

.js-count-particles{
  font-size: 1.1em;
}

#stats,
.count-particles{
  -webkit-user-select: none;
  margin-top: 5px;
  margin-left: 5px;
}

#stats{
  border-radius: 3px 3px 0 0;
  overflow: hidden;
  display: none;
}

.count-particles{
  border-radius: 0 0 3px 3px;
}

#lp-pom-block-8 .lp-pom-block-content {
  position : absolute;  
}

/* ---- particles.js container ---- */

#lp-pom-block-8{
  width: 100%;
  height: 746px;
  background-color: #f37c3f;
  background-image: url('');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
</style>

5 replies

Userlevel 6
Badge +3

Can you link to your landing please too? It will be easier to see what’s happening live 🙂

Hi Zoe, thanks for your answer!
Here’s the link to my landing page: http://curvecommunications.com/landing-page-1/
You’ll see that it looks good on desktop but then get all messed up on mobile…

Thanks in advance for your help!
Chloé

Hi Nicholas and Zoe,
It seemed like the issue was that our programmer put a different and more complicated code than the traditional Particle js code. I replaced it with the code I found on the community, and it works perfectly fine now.

Thank you to both of you for taking the time to have a look at my page, I really appreciate the support on this community!

Chloé

Userlevel 6
Badge +3

From what I’m seeing, I think this is actually just the business logos on the mobile view are out of bounds – if you move those or hide them, it should work 🙂

Userlevel 7
Badge +4

Yup, that’s what I’m seeing too. more or hide that out-of-bounds image on mobile and see if that fixes things.

Reply