Link to Producer platform not visible on small screen

[alexfauquette]

Problem

The link to "Producteur" disappears with a small screen. A producer with a 13" mac book will never see this link

Capture.video.du.2025-02-19.15-24-55.mp4

@manon-corneille

Proposed solution

This is due to the class="show-for-xlarge-up" which could be removed.

Capture.video.du.2025-02-19.15-24-27.mp4

The drawback is the logo OFF that shrinks. Should it be replaced by the small one.

Code pointers

site_layout.tt.html

[Pawan8538]

Proposed solution

This is due to the class="show-for-xlarge-up" which could be removed.

Propose solution

• Rather than removing class="show-for-xlarge-up" we should change it by class="show-for-medium-up" which allows upto medium screen users to access "Producers".

Recording.2025-03-12.121142.mp4

The drawback is the logo OFF that shrinks. Should it be replaced by the small one.

• There are no errors related to the logo.

If everything looks good, I'll proceed with the change. What do you think, @alexfauquette?" Any suggestions for improvement?" @manon-corneille

[alexfauquette]

It seems the logo error got reported on the "Get The APP" button.

[Pawan8538]

It seems the logo error got reported on the "Get The APP" button.

Yes, I think some CSS adjustments will help fix this issue:

1. Set a min-height for the logo to prevent it from shrinking too much.
2. Change link sizes from px to rem for better scalability.
3. Apply white-space: nowrap; to "GET THE APP" to keep it on a single line.
4. Use class="show-for-large-up" to display the button only on larger screens.
5. For class="show-for-medium-up", since there isn’t enough space, move it inside the (hamburger menu) for better mobile layout.

Recording.2025-03-12.142710.mp4

@alexfauquette want me to proceed with recommended changes or any suggestions?

[alexfauquette]

I'm not sure to hunderstand. You're suggesting to

Use class="show-for-large-up" to display the button only on larger screens.

Which seems to be the current behavior. It's not just a CSS issue. It's a lack of place.

I'm taking a screen shot from your video. At that moment you can see their is no more space for the producer link. We need to remove something. And the suggestion it to replace the long logo by a short one

[Pawan8538]

Exactly, I agree with replacing the short logo.

Use class="show-for-large-up" to display the button only on larger screens.

This says due to lack of space we can only show Producer to large screens only not to medium one, for medium and mobile view we need to add this in Hameburger menu.