How to size an Article box on a Landing page

How To
1

Dear team,

I would like to create a display similar to

58

on the main page of https://cern.ch/test-beams, for the Groups section. However, the boxes are displayed very large, how can I resize them?

25

Kind regards,
Katarina Sigerud

3

Hello Katerina,

A solution could be to make changes to CERN override theme by adding the following code snippet to theme.css file or to a new css file .

.component-preview-cards.portrait .component-preview-cards__box_wrapper {
	height: 180px;
}
.component-preview-cards.portrait {
	height: 236px;
}

Let me know if it works,
Ioannis

PS. I am pretty sure that Web Team will provide you with a better solution

1 Like
4

Hello Katarina,

The size of the boxes can be changed by changing the display of the box. If you want to imitate the configuration of the “Our Achievements” section of home website (the screenshot that you posted) then:

Place them under a section that uses the width “Fluid BG Centered content” and then 5 Article Boxes:

  1. Display: Portrait
  2. Display: Simple
  3. Display: Simple
  4. Display: Simple
  5. Display: Simple

Let me know if that works for you. Ioannis’ solution probably will work but try to avoid changing the theme when there is an option for that.

Kostas

1 Like
5

Hi Kostas,

Thank you, that worked! I should have tried that option first before contacting you…

Kind regards,
Katarina

1 Like
6

Hello,

I tried to do something similar to “Key Achievements” section following this article, but I am not sure what I need to do next. If I want to create a view, which display format should I use?

Best regards,
Ioannis

7

Hi Ioanni,

This can’t be applied automatically in a view as a display format. It’s only for content added manually under a section.

8

Thank you Sotirios,

I found a solution. I will write an article how I achieved it.

Best regards,
Ioannis

9

Hi
Related to this page I have seen the BE careers section:

be
be.JPG1379×345 62.6 KB

I have seen that a calculation with javascript has been added in order to resize the boxes.
Calculation
Calculation.JPG772×471 64.2 KB

Could someone explain where Can I do that in the cade? I need the same for the website https://test-chis.web.cern.ch/
chis
chis.JPG1099×334 37.5 KB

10

Hey @almudena.solero,

You can see how it is done in my answer on Problems in landing page with Article boxes.

However the solution I provide is NOT about a view using Horizontal Boxes, but for boxes in Landing Pages. Do you really need the content to be dynamic? If not then you can always do it static in the Landing Page using plain Article Boxes. Let me know if you have any question on the implementation.

Konstantinos

11

Thanks for your advise. I will see if I can use horizontal boxes instead ofview…
regards
almudena