Streaming live at 10am (PST)

Positioning elements


#1

Hello Everyone,

Something very simple i guess but I can’t find the solution …
On my projects detail pages I have a return to projects link called RETOUR AUX PROJETS.
This link is to low in the page exept for web projects. It sounds that the invisible div of web projects avoid it to be higher in the page…

Can someone help me ?

:blush:

Thank you so much


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

You have a section made of a section element, a container and 3 dynamic images that you’re pulling from the CMS.

It’s logical that when there’s no images defined for an item, no content shows up.

However, your invisible structure of a section element and a container element is still there, and any dimensional property such as width, height, padding and margin will make them take some room on the page.

You could prevent this to happen by not setting any dimensional property on html elements other than the dynamic ones, so that when there’s no dynamic content to show, html static elements would take zero space and be unnoticeable. However, this is not a practical solution.

The good practice

You’re going to use conditional visibility to hide the whole section when there’s no dynamic content. It is safe to assume that is there is no Web Image 1, then there won’t be a image 2 or 3, right? So let’s define this rule:

Only display the section when there’s something defined for the Web Image 1 Collection field (image field not set).

To do this, select the Section element and do this:

And the conditional filter in detail:

Conditional Visibility feature is an essential tool of CMS development. You should look into it an be sure you understand all the possibilities it offers. You use case of not showing something when it’s empty or elements is a very common one.


#3

Off topic, I discovered the Hossegor’s Ocean Clock brand through your site. I’m nuts about tide clocks and I’m surprised I didn’t know this brand :slight_smile: Quite some cool products on their shop. I think I’m in for a little shopping :slight_smile:


#4

Bonjour Vincent,

Encore Lisa ;-)))

Belle découverte en effet ! Ils sont supers sympas en plus !

Je te remercie pour ton aide. J’avais déjà mis en place cette solution mais on dirait que ça ne fonctionne pas bien… je ne comprends pas pourquoi…


#5

Tu as mis la condition sur l’element marqué en rouge.

Il faut la mettre sur l’element marque en vert. en effet les margins et paddings sont definis sur la section et le container, c’est ca qui prend de la place au final.


#6

Merciiiiii Vincent :slight_smile: