Docs

[charlescthomson]

Howdy Support!

I’ve sifted through the forum and found that there may be an solution to my issue. However, I haven’t had any success putting the solution to practice.

I would like to:

– Adjust the space between columns (1/3, 2/3 layout)
– Apply these changes to a single page (not the entire site)
– retain the responsive nature of the theme

I am currently using the following custom css with some success:

@media ( min-width: 768px ) {

.x-container:not(.marginless-columns) .x-column.x-1-3 {
margin-right: 2%;
width: 32%;
}

.x-container:not(.marginless-columns) .x-column.x-2-3 {
width: 66%;
margin-right: 0%;
}

.x-container:not(.marginless-columns) .x-column {
float: left;
}

.x-container:not(.marginless-columns) .x-column:last-child {
margin-right: 0px !important;
}

}

I nabbed this from another forum discussion.
However, I would like to have the space between the columns match the space between section 1 and section 2 (See uploaded image). I’ve tried variables with the margin right % but nothing seems to work.

Any help would be appreciated!

http://www.mrstbnb.com

[Joao]

Hi There,

Your image did not upload and based on your website it is not very clear what you are trying to achieve.

Please provide an image up to 500kb and let us know more details if you judge necessary.

Thanks

[charlescthomson]

I would simply like to reduce the white space between columns.
I do not want to use marginless columns and then adjust the padding.

[Jade]

Hi there,

Please try this code:

@media (min-width: 768px) {
 .home #x-section-2 .x-column.x-sm.x-1-3 {
     width: 33%;
     margin-right: 1%;
 }
}

Hope this helps.

[charlescthomson]

This reply has been marked as private.

[Jade]

Hi there,

Your login page requires and additional logins to be accessed. Kindly provide those details as well so that we can check this further.

Thank you.

[charlescthomson]

This reply has been marked as private.

[Jade]

Hi there,

The code that you have added in the customizer didn’t work because there is an extra } before it which causes an error in the CSS.

I have gone ahead and remove it and the works now.

Hope this helps.

[charlescthomson]

This reply has been marked as private.

[Rue Nel]

Hello There,

Using the given should have work. The problem is that you have adjusted the margin and it is the same with the margins of the first section. Please make sure that both sections has the same margin of 20 pixels left and right. Please check out this screenshot: http://prntscr.com/e7lrn8

Hope this helps.

[charlescthomson]

Margins were originally the same for both sections at 20 px. As explained in a previous thread post:

” Thanks seems to have done the trick!
However, now the image on the right doesn’t seems to line up properly. I tested it on two different monitor sizes. (see uploaded picture support4)

I attempted to fix this issue by adjusting the sections margin but that doesn’t seem to help…

”

—

I’ve uploaded screen shots of both sections with the same margins of 20 pixels with the issue unresolved.

Any help would be appreciated!

[Rad]

Hi there,

It’s because of existing customization related to column size. Regardless of margin or padding, space will still appear since column size is not properly calculated.

Change this existing CSS,

.home #x-section-2 .x-column.x-sm.x-1-3 {
    width: 33%;
    margin-right: 1%;
}

to this

.home #x-section-2 .x-column.x-sm.x-1-3 {
    width: 33.66%;
    margin-right: 1%;
}

That space is the missing 0.66%

Cheers!

[charlescthomson]

Thanks!

That did the trick!
However, I tried to duplicate this with my third section without any success!

This is what I’ve tried for a 2/3 layout:

.home #x-section-3 .x-column.x-sm.x-2-3 {
width: 66.34%;
margin-right: 1%;
}

As a result, I’me seeing a gap on the right side again (as with section 2 before it was solved).

Any thoughts?

Thanks!

[Rue Nel]

Hello There,

Thanks for updating in! Since the right size has a width of 30.66666%, you can make use of this code instead:

.home #x-section-3 .x-column.x-sm.x-2-3 {
  width: 68.33333%;
  margin-right: 1%;
}

Please let us know if this works out for you.

[charlescthomson]

Ah!

My math was wrong – my bad!

Thanks for all your help!

[Author]

Posts