[Resolved] Styling a view block

[Author]

Posts

[winyS]

hidden link
login: lvgo2023

On this page I have a view (see screenshot 1).

Question 1
The loop is a grid with 3 columns.
How can I make the containers equal height on the frontend? (screenshot 2)

Question 2
I have set the border-radius of the container to 5. However, the top left and top right border do not display this on the frontend (see screenshot 2 and 3). How can I resolve this?

Question 3
In the loop I have 2 “Fields and Text” blocks.
On the frontend, they display “??” instead of a space and “?” at the end (see screenshot 2 and 4).
How can I resolve this?

[Nigel]

I visited your site so that I could see the problem on the front end for myself to assess the issue, but I couldn't find a page on your site that matched the screenshot of the 3-column grid on the front end.

Where can I look for that?

[winyS]

hidden link
login: lvgo2023

[Nigel]

Thank you.

Checking the page source I see that the grid cells are equal height, but when you add a background colour to the loop item it gets applied to an inner div, not to the grid cell itself, and so the background colour doesn't extend to the full height of the grid cell. (I added a border to the grid cells so that you can see: screenshot).

You can rectify this by adding this CSS:

.tb-grid-column>* {
  height: 100%;
}

[Nigel]

As for the problem with the question-marks appearing on the front end, I can't tell what the cause of that might be without having a closer look. Would it be possible to get access to the site to examine the set up?

Let me mark your next reply as private so that I can get log-in credentials from you—you may want to create a temporary admin user for me to use that you can later delete. And be sure to have a current backup of your site.

[Nigel]

Thanks for the details, I logged in to your site and edited the View in question.

I see ?? is added as part of the Fields and Text blocks.

I think it is helpful to switch to the HTML editor rather than the Visual editor so that you can see exactly what is being inserted.

You can see the actual markup in my screenshot.

I am guessing the spans got added while entering content in the visual tab (I don't know exactly the steps that resulted in them being inserted), and that these are responsible for the appearance of ??

If it is correct that you didn't add these intentionally I suggest deleting them via the HTML editor.

Regarding the border radius issue, just looking at the front end I can see that is because you have applied negative margins to the image. Removing that reveals that the container does have a top border radius.

But the image is pushed down because you added padding to the container, which is presumably why you added the negative margins to the image.

I suggest you remove that padding and the negative margins, and only apply the padding where it is required (e.g. to the text below the image, which you may want to group inside a container so that you can apply padding once to that container rather than to each of the text fields individually).

[winyS]

Thank you, Nigel,

I will try. Since I am travelling this week, can you keep the ticket open for one more week? Then I can let you know if the problem is solved.

[Nigel]

It's not a problem to keep the ticket open.

I'll mark it as awaiting your feedback so that it's not sitting in my queue.

[winyS]

My issue is resolved now, many thanks!