Landing page 3 columns egal width

Online Support Service
1

Hello,
I have a Landing page (https://cryo4lhc-dp8.web.cern.ch/LogV2) with 3 columns. Each contain a text component.
As you can see on the page itself, the 3 columns have not the same width. Related to this page https://drupal-tools.web.cern.ch/docs/modules/landing-page/sections I don’t known how to balance the columns.
Thanks for your help.
Michel

2

Hello Michel,

Thanks for pointing it out since I forgot to add it in the documentation. When you have Left / Center / Right columns, they respectively hold 25% / 50% / 25%.

I will add it in the documentation.

Konstantinos

3

Ah OK, does any way exist to have the same width ?

4

If you want to use 3 columns no it is not. This configuration is chosen because the Center column holds the “main” content so it should cover more space than the rest.

As I saw in your page though you want to use only text components. So what you could do is to add one text component in the Center Column and then divide the columns using bootstrap (since the theme is based on bootstrap) using the Source of the text Editor.

For example:

<div class="col-md-4 col-sm-12">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div class="col-md-4 col-sm-12">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div class="col-md-4 col-sm-12">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

In this case you will have 3 equal columns of 4 Bootstrap columns each (since each section is 12 columns and 3x4=12). If you are not aware of how bootstrap works, you can read the official documentation

Let me know if you have any questions.

Konstantinos

1 Like
5

Thanks a lot Konstantinos, I will have a look on the documentation

6

Seems working, but not useful to add content.
I use Landing page because it’s easy to add a specific background, like colour or image. Is it possible to change the background inside a basic page ?

7

If you want easier bootstrap manipulation, you can try the CKEditor Bootstrap Grid module that enables a tool to use in your editor to change a bootstrap grid faster.

For basic pages there is no support for images on the background, the only thing you can do is to change the BODY: Background color in the color palette settings of the theme (/admin/appearance/settings/cernclean).However this will change the background color of every page in your website, so not sure if thats what you want.

In general for customised pages, you should consider using Landing Pages since it provides the flexibility to modify backgrounds per section. A basic rule of thumb is that Landing Pages are customised pages that are created per case, thats why they dont follow a pattern or scaffold. They give the flexibility to create a different page every time. On the other hand content types like the Basic Page are meant to be used to produce pages that look similar, they have similar fields etc. They are not flexible, but they are effective to create a lot of pages that follow a pattern.

Do you have something specific in mind that you want to create? If yes you can share it to see how you can create it using Landing Pages.

Konstantinos

8

Thanks a lot for your help Konstantinos.
What I want is to try to keep the layout of my Drupal 7 website : http://cryo4lhc.web.cern.ch/content/operation-tools
With the panels module it was simple to have different section on each page and easy to add content.
If is not exactly the same is not a problem but this is the idea of I want.
Edit : CKEditor Boostrap Grid module looks cool
Michel