Breaking the border around the text

[avangcom]

Hello
I have this html code, it breaks like this in mobile mode

 <code style="border: 1px solid #ccc;padding: 15px;border-radius: 3px;">{setting="walet addres"}</code><br />

@Exception@Desti@AHristich

[Desti]

Don't use <code> element

[avangcom]

1 minute ago, Desti said:

Don't use <code> element

What should I use????

[Desti]

<div>

[avangcom]

11 minutes ago, Desti said:

<div>

The box is created, but the text comes out of the box
I want the text to stay inside the frame

[Desti]

But it doesn't fit in there! Maybe try making the font size smaller?

[avangcom]

2 minutes ago, Desti said:

But it doesn't fit in there! Maybe try making the font size smaller?

Can it be set automatically only for mobile???

[Desti]

@media css options 

[avangcom]

2 minutes ago, Desti said:

@media css options 

I added this class to the code, the text didn't come out of the box
Is it right to use this class????

class="ipsType_richText"

 

<div class="ipsType_richText" style="border: 1px solid #ccc;padding: 15px;border-radius: 3px;">{setting="walet addres"}</div><br />

[Desti]

You can use anything you want, as long as you're happy with the result.

[avangcom]

On 11/12/2023 at 1:11 AM, Desti said:

@media css options 

Can you send how to use @media???

I only have this problem with mobile

[turk]

use overflow = hidden

[NostroGuardian]

В 11.12.2023 в 14:30, avangcom сказал:

Can you send how to use @media???

Hello!

You need to use css media queries: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries

You especially need point "@media (max-width: 1250px)...", as it allows you to change styles for a specific screen resolution. So, for example, if the screen size is too small, then you can reduce the size of the content and everything will be displayed correctly.

Good luck!