I have an existing page with preliminary text and graphics in a one column format. I am trying to change it to a three column page but, when I do, the format doesn’t translate well. The first column header jumps to the second column and the second column text jumps to the first column. After I save the html on-page code, the site somehow adds extra code. I think I have the correct liquid code in place as well as the correct on-page html. I am showing the code and html I am using below to confirm that I am correct.
I do not want to create a new page. It would take a week to reconnect all the links.
The page is linked to many other critical pages on the site. If I create a new page with a new URL link, all the links will be broken, so I am trying to just change the column formats and keep the URL link.
Thank you in advance for any help.
On-page
Liquid
.one-third-column {
width:32%;
margin-right:2%;
float:left;
}
.one-third-column-last {
width:32%;
margin-right:0;
float:right;
}
@media only screen and (max-width: 600px) {
.one-half-column-left, .one-half-column-right,
.one-third-column, .one-third-column-last {
float:none;
width:100%;
margin-right:0;
}
}