Using theme but can't centre column...

Jan 24th, 2017 at 06:40 AM
User 2845590 Photo

Paul Creamer
Registered User
5 posts

Hello

I am using the Visions Theme. I have a row with a column and 3 containers in them each container has an H title some text and an image. I can’t seem to centre the column with the content on the page.

I would appreciate any help at all. I have attached the code below for the section of the page and the main.css file for the theme. The css for the column is about line 933.

I anticipation of your help many thanks,

Paul

Code on page:

<div class="row row-1">
<div class="columns small-12 column-2 centered"><div class="container container-2"><h2 class="heading-3"><span class="heading-text-7">Commercial</span></h2><span class="text-element text-2"> <span class="text-text-11">To view different types of Commercial &nbsp;scaffolding we do click on the image below to go to our gallery.</span></span><div class="responsive-picture picture-3"><picture><!--[if IE 9]><video style="display: none;"><![endif]--><source srcset="./images/green_and_black_728.jpg" media="(min-width: 64.125em)"><source media="screen" srcset="./images/green_and_black_728.jpg"><!--[if IE 9]></video><![endif]--><img alt="Placeholder Picture" src="nodata...image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"></picture></div></div><div class="container container-2"><h2 class="heading-3"><span class="heading-text-11">Residential</span></h2><span class="text-element text-2"> <span class="text-text-12">To view different types of Residential scaffolding we do click on the image below to go to our gallery.</span></span><div class="responsive-picture"><picture><!--[if IE 9]><video style="display: none;"><![endif]--><source srcset="./images/green_and_black_346.jpg" media="(min-width: 64.125em)"><source media="screen" srcset="./images/IMG_1140.jpg"><!--[if IE 9]></video><![endif]--><img alt="Placeholder Picture" src="nodata...image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"></picture></div></div><div class="container container-2"><h2 class="heading-3"><span class="heading-text-12">New Build</span></h2><span class="text-element text-2"> <span class="text-text-13">To view different types of New Build scaffolding we do click on the image below to go to our gallery.</span></span><div class="responsive-picture picture-2"><picture><!--[if IE 9]><video style="display: none;"><![endif]--><source srcset="./images/IMG_1140.jpg" media="(min-width: 64.125em)"><source media="screen" srcset="./images/green_and_black_1131.jpg"><!--[if IE 9]></video><![endif]--><img alt="Placeholder Picture" src="nodata...image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"></picture></div></div>
</div>
</div>



main.css file:

/* Text Elements */

h1 span.heading-text-4 {
color: #0f6936;
}

h1 span.heading-text-5 {
color: #2a617d;
}

h1 span.heading-text-2 {
color: #2a617d;
}

h1 span.heading-text-10 {
font-weight: 600;
}

h1.heading-2 {
text-align: left;
}

h2 span.heading-text-7 {
color: #2a617d;
}

h2 span.heading-text-11 {
color: #2a617d;
}

h2 span.heading-text-12 {
color: #2a617d;
}

h2.heading-3 {
padding-top: 15px;
text-align: center;
}

h4.sub-title {
margin-top: 0;
margin-bottom: 0;
color: #2a617d;
text-align: center;
text-transform: uppercase;
font-size: 1.625rem;
font-family: 'Montserrat', sans-serif;
line-height: 1.2;
}

h4 span.heading-text-13 {
color: #0f6936;
}

h4 span.heading-text-9 {
color: #000507;
}

p.paragraph.paragraph-2 {
width: 350px;
}

p.paragraph span.paragraph-text-1 {
color: #2a617d;
}

p.paragraph a.paragraph-text-2 {
color: #2a617d;
}

p.paragraph span.paragraph-text-3 {
color: #2a617d;
}

span.text-element span.text-text-10 {
color: #2a617d;
}

span.text-element span.text-text-8 {
color: #2a617d;
}

span.text-element span.text-text-11 {
color: #2a617d;
}

span.text-element span.text-text-12 {
color: #2a617d;
}

span.text-element span.text-text-13 {
color: #2a617d;
}

span.text-element span.text-text-1 {
color: #2a617d;
}

span.text-element.text-4 {
padding-top: 10px;
padding-bottom: 11px;
text-indent: 0;
}

span.text-element.text-3 {
padding-top: 10px;
padding-left: 10px;
}

span.text-element.text-2 {
padding-bottom: 15px;
text-align: center;
}

span.text-element a.text-text-14 {
color: #2a617d;
}

span.text-element span.text-text-16 {
color: #2a617d;
font-weight: 600;
}

span.text-element span.text-text-6 {
font-weight: 700;
}

span.text-element span.text-text-9 {
font-weight: 700;
}

blockquote span.blockquote-text-5 {
color: #2a617d;
}

blockquote span.blockquote-text-1 {
font-style: italic;
}

blockquote span.blockquote-text-3 {
font-weight: 500;
}

blockquote span.blockquote-text-4 {
color: #2a617d;
}

blockquote span.blockquote-text-9 {
font-weight: 500;
}

blockquote span.blockquote-text-8 {
font-style: italic;
}

blockquote.blockquote-2 {
text-align: center;
}

a.link-text.footer-link {
display: inline-block;
margin-top: .4375rem;
margin-bottom: .4375rem;
margin-left: 0;
padding-right: 1.25rem;
padding-left: 1.25rem;
color: #2a617d;
font-size: .9375rem;
font-family: 'Montserrat', sans-serif;
}

/* Interaction Elements */

a.link-button {
font-family: 'Montserrat', sans-serif;
}

a.link-button.nav {
display: inline-block;
margin-top: .5625rem;
margin-bottom: .5625rem;
padding: .625rem 1.875rem;
color: #2a617d;
font-size: 1rem;
line-height: 1.6;
}

a.link-button span.button-link-text-2 {
font-weight: 600;
}

/* Layout Elements */

body > .row.nav-row {
background-color: #262626;
}

body > .row > [class*='small-'].centered-content {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
background-color: #fff;
text-align: center;

-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
-webkit-align-content: center;
-moz-align-content: center;
-ms-align-content: center;
-o-align-content: center;
align-content: center;
}

body > .row > [class*='small-'].hero-column {
padding-right: 0;
padding-left: 0;
}

body > .row.footer-row {
margin-top: 5rem;
padding-bottom: 0;
}

body > .row > [class*='small-'].footer-column {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
margin-bottom: 3.75rem;
text-align: center;

-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
-webkit-align-content: center;
-moz-align-content: center;
-ms-align-content: center;
-o-align-content: center;
align-content: center;
}

body > .row > [class*='small-'].column-1 {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
min-height: 6.25rem;

-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
}

body > .row > [class*='small-'].column-2 {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
padding-top: 12px;
min-height: 6.25rem;

-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
}

body > .row > [class*='small-'].column-3 {
margin-bottom: 10px;
padding-top: 10px;
padding-bottom: 10px;
}

.container.container-2 {
display: inline;
padding-right: 20px;

-webkit-order: 0;
-moz-order: 0;
-ms-order: 0;
-o-order: 0;
order: 0;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
-o-flex: 1;
flex: 1;
}

.container.container-1 {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
float: left;

-webkit-align-self: flex-start;
-moz-align-self: flex-start;
-ms-align-self: flex-start;
-o-align-self: flex-start;
align-self: flex-start;
}

.container.container-3 {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
clear: both;

-webkit-align-self: auto;
-moz-align-self: auto;
-ms-align-self: auto;
-o-align-self: auto;
align-self: auto;
}

.container.container-4 {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;

-webkit-align-self: flex-start;
-moz-align-self: flex-start;
-ms-align-self: flex-start;
-o-align-self: flex-start;
align-self: flex-start;
}

.container.container-5 {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;

-webkit-align-self: auto;
-moz-align-self: auto;
-ms-align-self: auto;
-o-align-self: auto;
align-self: auto;
}

.container.container-6 {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;

-webkit-align-self: auto;
-moz-align-self: auto;
-ms-align-self: auto;
-o-align-self: auto;
align-self: auto;
}

.container.container-7 {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;

-webkit-align-self: auto;
-moz-align-self: auto;
-ms-align-self: auto;
-o-align-self: auto;
align-self: auto;
}

div.responsive-picture.hero-image {
margin-bottom: .4375rem;
max-width: none;
}

div.responsive-picture.picture-2 {
-webkit-align-self: center;
-moz-align-self: center;
-ms-align-self: center;
-o-align-self: center;
align-self: center;
-webkit-flex: 0;
-moz-flex: 0;
-ms-flex: 0;
-o-flex: 0;
flex: 0;
}

div.responsive-picture.picture-3 > picture {
margin: 0;
}

div.responsive-picture.picture-3 {
margin-top: 0;
margin-left: 0;

-webkit-align-self: auto;
-moz-align-self: auto;
-ms-align-self: auto;
-o-align-self: auto;
align-self: auto;
}

div.responsive-picture.picture-1 {
margin-bottom: 10px;
margin-left: 10px;
padding-left: 0;
}

div.responsive-picture.gal {
padding: 5px;
}

@media screen and (min-width: 32.5625rem) {
/* Text Elements */

p.paragraph.paragraph-2 {
width: 379px;
}

p.paragraph span.paragraph-text-1 {
color: #2a617d;
font-weight: 600;
}
}

@media screen and (min-width: 40rem) {
/* Text Elements */

h1 span.heading-text-4 {
color: #0f6936;
}

h1 span.heading-text-3 {
color: #2a617d;
}

h1 span.heading-text-2 {
color: #2a617d;
}

h5.heading-1 {
position: static;
clear: left;
overflow: visible;
color: #2a617d;
}

/* Interaction Elements */

a.link-button.nav {
color: #2a617d;
text-align: right;
font-weight: 800;
font-size: 1rem;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

/* Layout Elements */

body > .row > [class*='small-'].column-1 {
min-height: 12.5rem;
}

body > .row > [class*='small-'].centered-content {
float: left;
background-color: #fff;

-webkit-justify-content: flex-end;
-moz-justify-content: flex-end;
-ms-justify-content: flex-end;
-o-justify-content: flex-end;
justify-content: flex-end;
}

body > .row > [class*='small-'].column-2 {
min-height: 12.5rem;
}
}

@media screen and (min-width: 64rem) {
/* Text Elements */

h1 span.heading-text-1 {
color: #0a0a0a;
font-weight: 800;
font-size: 1.8125rem;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

h1 span.heading-text-2 {
color: #2a617d;
font-size: 2.375rem;
}

h1 span.heading-text-3 {
color: #2a617d;
}

h1 span.heading-text-4 {
color: #0f6936;
}

h1 span.heading-text-10 {
font-size: 2.375rem;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

h1.heading-2 {
text-align: center;
}

h2.heading-3 {
color: #2a617d;
text-align: center;
}

h4.sub-title {
margin-top: 0;
margin-bottom: 0;
color: #2a617d;
font-size: 2.25rem;
}

h5.heading-1 {
float: right;
}

span.text-element.text-2 {
color: #2a617d;

-webkit-align-self: flex-start;
-moz-align-self: flex-start;
-ms-align-self: flex-start;
-o-align-self: flex-start;
align-self: flex-start;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
-o-flex: 1;
flex: 1;
}

span.text-element span.text-text-4 {
color: #2a617d;
font-weight: 700;
}

span.text-element span.text-text-7 {
color: #2a617d;
}

span.text-element span.text-text-1 {
color: #2a617d;
}

span.text-element span.text-text-2 {
font-weight: 700;
}

span.text-element span.text-text-6 {
font-weight: 700;
}

span.text-element span.text-text-8 {
color: #2a617d;
}

span.text-element span.text-text-9 {
font-weight: 700;
}

span.text-element.text-3 {
padding-bottom: 30px;
}

blockquote.blockquote-2 {
padding-top: 1rem;
text-align: center;

-webkit-align-self: stretch;
-moz-align-self: stretch;
-ms-align-self: stretch;
-o-align-self: stretch;
align-self: stretch;
}

/* Interaction Elements */

a.link-button span.button-link-text-1 {
color: #2a617d;
font-weight: 700;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

a.link-button span.button-link-text-2 {
color: #2a617d;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

a.link-button span.button-link-text-3 {
color: #2a617d;
}

a.link-button.nav {
float: none;
font-weight: 700;

-webkit-align-self: flex-end;
-moz-align-self: flex-end;
-ms-align-self: flex-end;
-o-align-self: flex-end;
align-self: flex-end;
}

/* Layout Elements */

body > .row > [class*='small-'].centered-content {
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;

-webkit-justify-content: flex-end;
-moz-justify-content: flex-end;
-ms-justify-content: flex-end;
-o-justify-content: flex-end;
justify-content: flex-end;
}

body > .row > [class*='small-'].column-1 {
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
}

body > .row > [class*='small-'].column-2 {
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;

-webkit-align-content: center;
-moz-align-content: center;
-ms-align-content: center;
-o-align-content: center;
align-content: center;
}

.container.container-2 {
float: left;
width: 32%;

-webkit-align-self: flex-start;
-moz-align-self: flex-start;
-ms-align-self: flex-start;
-o-align-self: flex-start;
align-self: flex-start;
}

div.responsive-picture.picture-1 {
float: left;
margin-right: -25px;
}
}

@media screen and (min-width: 64.125rem) {
/* Text Elements */

h1 span.heading-text-1 {
font-size: 2.5625rem;
}

h1 span.address {
font-size: 1.4375rem;
}

h1.heading-2 {
-webkit-align-self: stretch;
-moz-align-self: stretch;
-ms-align-self: stretch;
-o-align-self: stretch;
align-self: stretch;
}

h2.heading-3 {
display: inline;
margin-top: 10px;
margin-bottom: 10px;
text-align: center;

-webkit-align-self: center;
-moz-align-self: center;
-ms-align-self: center;
-o-align-self: center;
align-self: center;
}

h4.sub-title {
margin-top: 0;
margin-bottom: 0;
font-size: 2.25rem;
}

h4 span.heading-text-8 {
color: #0f6936;
}

h4 span.heading-text-9 {
color: #000507;
}

h4 span.heading-text-6 {
color: #2a617d;
}

p.paragraph.paragraph-2 {
float: right;
width: 371px;
}

p.paragraph span.paragraph-text-1 {
color: #2a617d;
font-weight: 600;
}

span.text-element.text-2 {
margin-bottom: 20px;

-webkit-align-self: flex-start;
-moz-align-self: flex-start;
-ms-align-self: flex-start;
-o-align-self: flex-start;
align-self: flex-start;
-webkit-flex: 0;
-moz-flex: 0;
-ms-flex: 0;
-o-flex: 0;
flex: 0;
}

span.text-element.text-1 {
position: relative;
top: auto;
bottom: auto;
float: left;
clear: none;
color: #2a617d;
font-weight: 500;
}

span.text-element span.text-text-1 {
font-weight: 400;
}

span.text-element span.text-text-2 {
font-weight: 700;
}

span.text-element span.text-text-3 {
color: #2a617d;
}

span.text-element span.text-text-4 {
font-weight: 700;
}

span.text-element span.text-text-5 {
color: #2a617d;
}

span.text-element span.text-text-6 {
font-weight: 700;
}

blockquote span.blockquote-text-1 {
color: #2a617d;
}

blockquote span.blockquote-text-2 {
color: #2a617d;
}

blockquote span.blockquote-text-3 {
color: #2a617d;
font-weight: 500;
}

blockquote span.blockquote-text-4 {
color: #2a617d;
}

blockquote span.blockquote-text-5 {
color: #2a617d;
}

blockquote span.blockquote-text-6 {
color: #2a617d;
}

blockquote span.blockquote-text-7 {
color: #2a617d;
font-style: italic;
}

blockquote span.blockquote-text-8 {
font-style: italic;
}

blockquote span.blockquote-text-9 {
font-weight: 500;
}

/* Interaction Elements */

a.link-button.nav {
font-size: .875rem;
}

/* Layout Elements */

body > .row > [class*='small-'].centered-content {
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
}

body > .row > [class*='small-'].footer-column {
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
white-space: nowrap;

-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-o-align-items: flex-start;
align-items: flex-start;
-webkit-align-content: flex-start;
-moz-align-content: flex-start;
-ms-align-content: flex-start;
-o-align-content: flex-start;
align-content: flex-start;
}

body > .row > [class*='small-'].column-1 {
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
float: left;
min-height: 9.375rem;
}

body > .row.row-1 {
position: static;
margin-top: 0;
margin-right: 0;
margin-left: 0;
}

body > .row.row-2 {
display: block;
}

body > .row > [class*='small-'].column-2 {
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
float: none;
margin: 0 auto;
min-height: 9.375rem;

-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
-o-flex-wrap: nowrap;
flex-wrap: nowrap;
}

.container.container-2 {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
float: none;
clear: none;
margin-top: 25px;
margin-right: 0;
margin-bottom: 25px;
padding-right: 20px;
padding-left: 20px;
min-height: 50px;
width: 32%;

-webkit-align-self: flex-start;
-moz-align-self: flex-start;
-ms-align-self: flex-start;
-o-align-self: flex-start;
align-self: flex-start;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-o-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
-webkit-align-content: stretch;
-moz-align-content: stretch;
-ms-align-content: stretch;
-o-align-content: stretch;
align-content: stretch;
}

div.responsive-picture.picture-1 {
padding-top: 30px;
}
}
Jan 24th, 2017 at 09:06 AM
User 434929 Photo

Mansour ...
Ambassador
938 posts

attach project file instead of code.
Guys at coffeecup are awesometacular.
Jan 24th, 2017 at 11:00 AM
User 122279 Photo

Inger
Senior Advisor
14,450 posts

Mansour is quite right, with these responsive, 'no-or-hardly-any-coding' programmes, it is much easier to help when seeing the project file. Going through all the code takes ages, and besides, would a non coder understand if we said something like 'that class soandso needs the property suchandsuch to be set to whatever-value'?
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.