I am trying to put the following dynamic chart on a page. It’s this chart: Chart I want to create
I didn’t attempt to work with the uncompiled SCSS and just used the compiled CSS.
I used chatGPT to combine the HTML and CSS from the above link. After a few iterations, it worked perfectly , but ONLY in the page editor. Even the hover sections worked (Picture 1 below).
However, when I went to view the live page, it was different / messed up (Picture 2 below). The rows overlapped, content was not included, etc. I tried creating a </> custom liquid section instead of using page editor, same outcome.
Is this a Dawn-Theme related issue? Is there anything I can do to fix it? Any help or guidance appreciated! Thanks!
I’ve included the combined CSS/HTML code snippet
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> Contest Table
<style><!--
/* Google fonts - Open Sans */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
/* body */
body {
background: rgba(0, 0, 0, 0.9);
font-family: "Open Sans", sans-serif;
}
/* links */
.nfl a, .mlb a, .nhl a, .pga a {
text-decoration: none;
transition: color 0.2s ease-out;
}
.nfl a {
color: #4fc0d2;
}
.nfl a:hover {
color: #268695;
}
.mlb a {
color: #52d29a;
}
.mlb a:hover {
color: #279766;
}
.nhl a {
color: rgba(231, 196, 104, 0.7);
}
.nhl a:hover {
color: rgba(201, 154, 32, 0.7);
}
.pga a {
color: #eb7655;
}
.pga a:hover {
color: #c33d17;
}
/* wrapper */
.wrapper {
width: 100%;
max-width: 1000px;
margin: 20px auto 100px auto;
padding: 0;
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.9);
overflow: hidden;
position: relative;
}
/* lists */
.row ul {
margin: 0;
padding: 0;
}
.row ul li {
margin: 0;
font-size: 16px;
font-weight: normal;
list-style: none;
display: inline-block;
width: 20%;
box-sizing: border-box;
}
@media only screen and (max-width: 767px) and (min-width: 480px) {
.row ul li {
font-size: 13px;
}
}
@media only screen and (max-width: 479px) {
.row ul li {
font-size: 13px;
}
}
.title ul li {
padding: 15px 13px;
}
.row ul li {
padding: 5px 10px;
}
/* rows */
.row {
padding: 20px 0;
height: 30px;
font-size: 0;
position: relative;
overflow: hidden;
transition: all 0.2s ease-out;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.row:hover {
background-color: rgba(26, 26, 26, 0.9);
height: 65px;
}
@media only screen and (max-width: 767px) {
.row:hover {
height: 85px;
}
}
@media only screen and (max-width: 359px) {
.row:hover {
height: 105px;
}
}
.title {
padding: 25px 0 5px 0;
height: 45px;
font-size: 0;
background-color: rgba(255, 255, 255, 0.1);
border-left: 3px solid rgba(255, 255, 255, 0.1);
}
.title:hover {
height: 45px;
background-color: rgba(255, 255, 255, 0.1);
border-left: 3px solid rgba(255, 255, 255, 0.1);
}
@media only screen and (max-width: 767px) {
.title-hide {
display: none;
}
}
.nfl {
border-left: 3px solid #1c616c;
}
.nfl:hover {
border-left: 3px solid #4fc0d2;
}
.mlb {
border-left: 3px solid #1d6e4b;
}
.mlb:hover {
border-left: 3px solid #52d29a;
}
.nhl {
border-left: 3px solid rgba(157, 121, 25, 0.7);
}
.nhl:hover {
border-left: 3px solid rgba(231, 196, 104, 0.7);
}
.pga {
border-left: 3px solid #952f12;
}
.pga:hover {
border-left: 3px solid #eb7655;
}
/* row one - fadeIn */
.row-fadeIn-wrapper {
opacity: 0;
font-size: 0;
height: 0;
overflow: hidden;
position: relative;
transition: all 0.2s ease-out;
animation: fadeIn 0.4s ease-out 2s 1 alternate;
animation-fill-mode: forwards;
}
.row-fadeIn-wrapper:hover {
height: 35px;
}
@media only screen and (max-width: 767px) {
.row-fadeIn-wrapper:hover {
height: 55px;
}
}
@media only screen and (max-width: 359px) {
.row-fadeIn-wrapper:hover {
height: 75px;
}
}
.fadeIn {
padding: 20px 0;
font-size: 0;
position: absolute;
transition: all 0.2s ease-out;
width: 100%;
}
.fadeIn:hover {
background-color: rgba(26, 26, 26, 0.9);
}
/* row two - fadeOut */
.row-fadeOut-wrapper {
font-size: 0;
overflow: hidden;
position: relative;
transition: all 0.2s ease-out;
animation: fadeOut 0.4s ease-out 8s 1 alternate;
animation-fill-mode: forwards;
opacity: 1;
height: 65px;
}
.row-fadeOut-wrapper:hover {
height: 100px;
}
/* update content */
.update-row {
animation: update 0.5s ease-out 12s 1 alternate;
}
.update1 {
position: absolute;
top: 25px;
display: inline-block;
opacity: 1;
animation: update1 1s ease-out 12s 1 alternate;
animation-fill-mode: forwards;
}
.update2 {
position: absolute;
top: 25px;
display: inline-block;
opacity: 0;
animation: update2 4s ease-out 13s 1 alternate;
animation-fill-mode: forwards;
}
/* more content */
ul.more-content li {
position: relative;
top: 22px;
font-size: 13px;
margin: 0;
padding: 10px 13px;
display: block;
height: 50px;
width: 100%;
color: rgba(128, 128, 128, 0.9);
}
@media only screen and (max-width: 767px) {
ul.more-content li {
font-size: 11px;
}
}
/* small content */
.small {
color: rgba(102, 102, 102, 0.9);
font-size: 10px;
padding: 0 10px;
margin: 0;
}
@media only screen and (max-width: 767px) {
.small {
display: none;
}
}
/* keyframe animations */
@keyframes fadeIn {
from {
background: rgba(255, 255, 255, 0.1);
opacity: 0;
padding: 0;
}
to {
background: rgba(51, 51, 51, 0.1);
opacity: 1;
padding: 0 0 65px 0;
}
}
@keyframes fadeOut {
from {
background: rgba(51, 51, 51, 0.1);
opacity: 1;
height: 65px;
}
to {
background: rgba(255, 255, 255, 0.1);
opacity: 0;
height: 0;
}
}
@keyframes update {
0% {
background: rgba(51, 51, 51, 0.1);
}
50% {
background: rgba(255, 255, 255, 0.1);
}
100% {
background: rgba(51, 51, 51, 0.1);
}
}
@keyframes update1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes update2 {
0% {
opacity: 0;
color: rgba(255, 255, 255, 0.9);
}
20% {
opacity: 1;
color: #52d29a;
}
100% {
opacity: 1;
color: rgba(255, 255, 255, 0.9);
}
}
--></style>
<section class="wrapper"><!-- Row title --> <main class="row title">
<ul>
<li>Sport</li>
<li>Entry $</li>
<li><span class="title-hide">#</span> Entries</li>
<li>Max</li>
<li>Time</li>
</ul>
</main> <!-- Row 1 - fadeIn -->
<section class="row-fadeIn-wrapper">
<article class="row fadeIn nfl">
<ul>
<li><a href="#">NFL</a><span class="small">(fadeIn)</span></li>
<li>$50</li>
<li>12</li>
<li>48</li>
<li>2:00ET</li>
</ul>
<ul class="more-content">
<li>This 1665-player contest boasts a $300,000.00 prize pool and pays out the top 300 finishing positions. First place wins $100,000.00. Good luck!</li>
</ul>
</article>
</section>
<!-- Row 2 - fadeOut -->
<section class="row-fadeOut-wrapper">
<article class="row nfl">
<ul>
<li><a href="#">NFL</a><span class="small">(fadeOut)</span></li>
<li>$5</li>
<li>45</li>
<li>100</li>
<li>3:00ET</li>
</ul>
<ul class="more-content">
<li>This 1665-player contest boasts a $300,000.00 prize pool and pays out the top 300 finishing positions. First place wins $100,000.00. Good luck!</li>
</ul>
</article>
</section>
<!-- Row 3 -->
<article class="row nfl">
<ul>
<li><a href="#">NHL</a></li>
<li>$50</li>
<li>12</li>
<li>48</li>
<li>12:00ET</li>
</ul>
<ul class="more-content">
<li>This 1665-player contest boasts a $300,000.00 prize pool and pays out the top 300 finishing positions. First place wins $100,000.00. Good luck!</li>
</ul>
</article>
<!-- Row 4 -->
<article class="row mlb update-row">
<ul>
<li><a href="#">MLB</a><span class="small">(update)</span></li>
<li>$10</li>
<li><span class="update1">1</span><span class="update2">2</span></li>
<li>10</li>
<li>1:00ET</li>
</ul>
<ul class="more-content">
<li>This 1665-player contest boasts a $300,000.00 prize pool and pays out the top 300 finishing positions. First place wins $100,000.00. Good luck!</li>
</ul>
</article>
<!-- Rows 5 to 11, following the same pattern for content layout and class assignment as Rows 1 to 4 --> <!-- Repeating the HTML structure for Rows 5 to 11 with corresponding details -->
<article class="row mlb">
<ul>
<li><a href="#">MLB</a></li>
<li>$5</li>
<li>48</li>
<li>120</li>
<li>12:00ET</li>
</ul>
<ul class="more-content">
<li>This 1665-player contest boasts a $300,000.00 prize pool and pays out the top 300 finishing positions. First place wins $100,000.00. Good luck!</li>
</ul>
</article>
<!-- Additional rows omitted for brevity but should continue with the specified pattern for each row --></section>
