Docs

[Eric]

Hey I’ve looked through the forums but I can’t quite figure this out. Basically what I’m trying to do is create spacing between text using HTML so that they’re evenly lined up on multiple lines, which is the effect that would be achieved in a word document by clicking ‘tab’ on the keyboard. In the end the only thing that got me close was to create separate columns and line up the text accordingly (see screenshot S1), which looks perfect when the browser is fully open (see screenshot S2), however when the browser is smaller (or when I view the page on mobile) the columns collapse (as you can see from screenshot S3).

I’m sure there’s a much easier way to achieve the design in screenshot S2 but I can’t figure it out. Please advise, and thanks in advance for your help.

[Eric]

This reply has been marked as private.

[Lely]

Hello Eric,

Thank you for the screenshots.
To achieve the design in S2 we can use columns shortcode inside text element:

[x_column type="1/3"]Title<br>Genre<br>Type<br>Pitch:<br>Logline[/x_column] [x_column type="2/3" last="true"] <strong>Working Title</strong><br>Action, Thriller<br>Feature-Length<br>Silence of the lambs<br>sdsdsds sdsds sdsds sds ds sdsd sdsdsd ghggh ssddsd sdsds [/x_column]

See this sample:http://screencast-o-matic.com/watch/cbVlf3Qpls
Feel free to adjust column size.

Hope this helps.

[Eric]

Hey thanks for the reply but unfortunately it didn’t work. The column shortcode that you gave me was basically the same thing that I had. In both cases it looks fine when the screen is wide but when the browser is small (or when it’s on mobile), the content collapses, which throws the formatting off as the first column stays above the second column (see screenshot S4).

Any other ideas on how this could be fixed?

Thanks again for your help.

[Rue Nel]

This reply has been marked as private.

[Eric]

This reply has been marked as private.

[Nabeel A]

Hi again,

Can you please provide the URL of the page in question so we can take a look?

Thanks!

[Eric]

This reply has been marked as private.

[Nico]

Hi There,

Thanks for the URL and login details.

Add this in your customizer > Custom > CSS:

.single-x-portfolio .single-x-portfolio{
padding: 0px;
}

Hope it helps.

Let us know how it goes.

Thanks.

[Eric]

Sorry but that did nothing. Any other ideas?

I assumed that I would need to add something to this code:

.x-block-grid {
margin: 0;
padding: 3px;
}

But so far nothing I’ve tried has worked. Please advise.

Thanks

[Rue Nel]

Hello There,

Thanks for updating in! Do you want some spacing like this?

If that is the case, please edit your page in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

.x-block-grid>li {
    line-height: 1em;
}

You may increase the line height from 1.1em to 1.nem where n => 9.

Hope this helps.

[Eric]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thank you for the clarifications. To be able to have the first grid item closer to the second grid item, please use this code:

.x-block-grid.two-up>li:nth-child(2n+1) {
    max-width: 20%;
}

Feel free to increase or decrease the percentage if needed.

Please let us know how it goes.

[Eric]

Thanks for the code. I set the max-width to 25%, which is the exact spacing I wanted, however although the spacing is good now, the second grid items are very narrow because of it. Is there any way I can keep the 25% spacing while making the second grid items wider (as seen in Screenshot S6).

If I can figure that out then it will be perfect. Let me know, and thanks again for your help.

[Nabeel A]

Hi again,

Try adding the following code in your Customizer:

.single-x-portfolio .x-main {
    max-width: 800px !important;
}
.single-x-portfolio .x-block-grid.two-up>li {
    width: 70% !important;
}

Let us know how this goes!

[Author]

Posts