Minimize column containing vertical line element

[PJ1]

I have three columns in a row. The center column contains a vertical line element. The other columns contain text. I want to control the width of the center column to draw the columns with text closer to the vertical line element. Right now all columns have an equal width. Thanks for the help.

[nabeel]

Hi there,

Thank you for reaching out to us. First give your section that contains your three columns a class custom-width-section

Then add the following code in the Theme Options > CSS:

@media screen and (min-width: 768px) {
    .custom-width-section .x-column:first-child {
        width:  45%;
    }
    .custom-width-section .x-column:nth-child(2) {
        width:  2%;
    }
    .custom-width-section .x-column:last-child {
        width:  45%;
    }
}

Feel free to adjust the width of three columns as per your requirement. If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Cheers!

[PJ1]

Thank you for this. In my version of X Theme, CLASS is gone from the left hand side under SETUP now. All I can find is under the SETTING wheel under META SETTINGS for Body CSS Class (es). Is that what I use now?

[PJ1]

Don’t worry. I found it.

[PJ1]

Nabeel,

That worked, thank you, but it affect every column everywhere. Is there a way to have it work on just one section?

[friech]

Hi Pj,

That is the purpose of the Class so it would not affect the other Sections. Please make sure to add the Class custom-width-section to the intended section only.

Inspect your section.

And the class field is under the Customize panel

And remove the class that you added on the Body CSS Class

Thanks,

[PJ1]

Thank you that worked. Why does the CSS have to go in the Theme Options and not on the page’s CSS?

[jade]

Hi there,

You could place the CSS in the Cornerstone page’s CSS area and you could also place it in the Theme Options.

The difference is that if you place the CSS to the Cornerstone page, the CSS code will only take effect on that page specifically and if you intend to replicate the CSS styling in other pages, you have to copy the CSS to the other pages. If you place the code in the Theme Options, you can simply place the class to the elements, sections, or rows and it will take effect site wide.

Hope this explains it.