Listing Title Wraps Incorrectly on Small Screens

[7upzonesn]

Describe the issue in as much detail as possible.
The title of the listing does not display properly on small screens (e.g., 360x680 resolution). Long titles wrap awkwardly and become difficult to read, which negatively impacts the user experience. I would like a solution to ensure the titles are displayed cleanly on smaller devices.

---

Steps to reproduce

1. Create a listing with a long title (e.g., “Console PlayStation 4 Améliorée 500GB Fat Model | Renouvelée & Entièrement Inspectée”).
2. View the site on a mobile device or using a screen resolution of 360x680.
3. Observe how the title wraps over multiple lines in an unreadable way.

---

Actual result

The title appears broken across multiple lines, making it difficult to read and negatively impacting the overall design.

---

Expected result

The title should display properly, either by truncating the text, resizing the font, or implementing clean line breaks for better readability on smaller screens.

---

Extra details

• Here’s a screenshot of the issue:

Let me know if additional information is needed to resolve this issue.

[shibfox]

Share url of this page.

[7upzonesn]

Here is the url : Se connecter – 7upZone, but you need to be connected to and have an ad on the site to be able to access it

[shibfox]

I checked your website, and everything looks great on mobile devices. I suggest viewing it directly on a mobile device instead of relying on theme editors like Elementor or similar tools for mobile previews on a desktop.

Just a note: your website looks pretty good overall!

[7upzonesn]

I show you below the display of the page on my phone, and you should know that I use “Hotjar” to view the users’ session and several users encounter the same problem.

Thanks You for the Note !

[7upzonesn]

I think your screen resolution is higher than 360x680

[shibfox]

Better Approach for Mobile View:

To reduce the title length in the editing area specifically on mobile devices, you can use the following CSS in Additional CSS:

@media (max-width: 768px) { /* Adjust the max-width if needed */
.hp-listing--edit-block .hp-listing__title span {
    display: inline-block;
    max-width: 10ch; /* Limit to 10 characters */
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Hide overflowing text */
    text-overflow: ellipsis; /* Add "..." to indicate truncation */
}

This code will ensure the title is shortened and displayed with “…” when it exceeds 10 characters, making it more concise and user-friendly on mobile devices.

[7upzonesn]

Thanks You a lot, it works !!

[shibfox]

Could you explain how you designed your website? The grids look amazing!

[7upzonesn]

Since the website’s launch in July, I have been actively modifying its design. With the default theme, there was only one listing per row, which I found took up too much space. So, with the help of ChatGPT and some basic web development knowledge, I asked it to display the listings in two columns. Of course, I had to sacrifice some elements to save space and resized the block dimensions.

[shibfox]

ChatGPT? That’s really impressive! If you don’t mind, could you share the CSS codes you added under Additional CSS? I’d love to learn from it.

[7upzonesn]

Here is the code, don’t forget to also reduce the font size of the prices on Mobile

@media (max-width: 840px) {
	#content > div > div > div:nth-child(4) {
		display : none;
	}
.hp-icon.fas.fa-plus {
        display: none;
    }
	body > div.site-container > header > div > div.header-navbar__end > div > div > button > span {
		display: inline;
	}
.hp-listing-packages .hp-row{
		display : block;
	}
	#content > div > div > div.superblockslider > div.superblockslider__controls.superblockslider__buttons > button > span > svg {
		display : none;
	}
	.page-id-8 .site-content {
	padding-top : 0px;
}
	.page-id-8 .container {
		padding : 0px;
	}	
	.page-id-8 .footer-widgets{
		margin-left : 20px;
		margin-right : 20px;
	}
	.page-id-8 .hp-listings.hp-block.hp-grid {
		margin-left : 20px;
		margin-right : 20px;
	}
}

[shibfox]

Thank you

[nickroy94]

Hello my friend,

First, you’ve managed to create an awesome website, it’s pretty amazing!

Second, when I was exploring it, it seems that some kind of Google Ad popped up. How we’re you able to do this? My point is the website is kinda new so how we’re you able to do that?

Thanks in advance.

[7upzonesn]

Thank you so much for the kind words and for taking the time to explore the website—I really appreciate your feedback!

Regarding the Google Ads you saw, I actually just went to the Google AdSense website and followed their instructions to set up ads on the site. However, what you encountered were just tests I was running; the ad option hasn’t been fully activated yet.

[nickroy94]

You are so welcome!

Good luck with your ongoing projects!