Problems in landing page with Article boxes

How To
, ,
1

Dear all,

I am facing two problem in my landing page.
I have created two article box and put them in the Column Center in Content.

My first problem is that, although in Display and in the Effects section I have clicked on the Box effects my box are not moving.

The other problem is that although I have chosen the boxes to be in the centered, they are slightly to the left.

Could please anyone help me with that??

Thank you all!

Kind regards,
Evi

2

Good afternoon Evi,

For your first problem, in the Display panel you need to have Box Effects checked and in each box settings in display you need to choose either Simple or Portrait. If you choose landscape indeed it is not moving(not sure if it is a bug). Can you try that?

For your second problem, can you add a screenshot which will help understanding your case better?

Best Regards,
Aimilios Tsouvelekakis

3

Thank you Aimilios for your reply.

For the moving boxes, I tried the Effects and the display simple as you say, nothing works.

Capture5
Capture5.JPG396×574 23.3 KB

And this is how my boxes are not centered.

Capture
Capture.JPG1873×689 90.6 KB

Thank you for your help!

Cheers,
Evi

4

Hello Evi,

Before getting into details, please make sure to first read the documentation about box shapes and configuration.

Having mentioned that, how do you want the boxes to appear? What configuration do you try to achieve? Can you provide an example?

Kostas

5

Hello Kosta,

I have read all the documentation regarding the box shapes and followed all the steps. But I don’t know what is wrong with my case.

I have created those two Article boxes that you can see in my second attached image in my previous message. I choose a portrait display and have placed them both under the column center. That means that both should be aligned on the center, right? Now they seem like a third box is missing on the right side. This is my first issue. Unfortunately I have no example of two centered article boxes in any Drupal 8 CERN website to show you as a reference.

My other problem is that a want this effect that expands each box when hovering. For that I used the Box effects but unfortunately, it is not working.

Please let me know if there is anything else that I can do. If you need some more clarifications , i can provide you with the site’s link to check by yourself.

Thank you and have a nice week!

Kind regards,
Evi

6

Hello Evi,

The boxes support the configurations that are mentioned in the documentation. If you do not choose one of the configurations mentioned, then the boxes will hold a specific space within the section. In other words, the boxes do not stretch in order to fill the full width of the section. For example the portrait and simple modes fills 1/3 of the section. So your settings are not wrong, it’s just how the boxes render.

I can provide 2 alternatives in your case:

  1. If you specifically want to use 2 boxes, I would suggest to use 2 boxes in Landscape mode so that they will be placed the one under the other. However, You will not be able to use the hover effect.
  2. The second solution is a bit more tricky, but works. To start with, read the Content paragraph of the documentation. You will notice that based on which column you decide to fill, the columns hold a specific percentage of the section. Having mentioned that, its easy to understand that if you fill only the left and right columns, then the boxes will each hold 50% of the section. So what you need to do is place one box in the left column and another box in the right column. The result should look like the two boxes in following image.
    04
    Screenshot 2019-08-26 at 12.20.04.jpg1296×988 408 KB
    .

Let me know if that works for you. If not then we can see another solution (Maybe use Featured Banner instead of boxes?)

Kostas

7

Here is how I solved this.

First, I followed Kosta’s suggestion and put one Article box on the left column and one Article box on the right column. They still don’t move, but at least, they look nice.

I found out regarding the movement of the boxes that, you should put ONLY boxes in a section if you want them to move. The mistake that I was doing is that, I included a margin component to provide some space between the other components. That was preventing the boxes from moving.

Thank you all for your help!
Kind regards,
Evi