Html help! trying to fix width in code!

[kayns]

I want help to fix this code, with a lot of effort I found a way to put the text on the image with this code. the only problem is that the image does not have a fixed size and changes depending on the screen resolution
(sometimes the image is a square and other times it’s perfect) how I do to make it fixed width at 805 pixels ?

where is the error?
thank you.




<ul id="main" style="display:block;width:60%;height:500px;min-width:500px;font-weight:normal;list-style:none;box-sizing:border-box;background-color:#066;background-image: url(https://i.postimg.cc/hPzhKC9n/Artboard-2-copy-2.png);">

<li style="display:block;width:800px;height:auto;list-style:none;box-sizing:border-box;padding:0;margin:50px auto 40px auto;"><p style="display:block;width:80%;height:auto;margin:0 auto;text-align:center;line-height: 200%;font-size:2.500rem;color:#DDA0DD."> TEXT OVER IMAGE </p></li>

 

[Autumn Nights]

Disclaimer: I didn't test this code myself and am just applying what I know to it. Chaturbate filters some HTML/CSS for security purposes and I'm still trying to figure out its rules myself, so no guarantee my answer is the correct one. Please try this code yourself and post back.

Is this code written by yourself, generated from an application, or taken from the web developer? Knowing this will help guide you.

Right now the <ul> tag which contains your image is set to a variable width, ie to 60% of the container and will dchange according to screen size. The issue is that the width of your <ul> is set to a variable width while the width of your <li> and <p> tags are fixed. You're also missing closing </ul> tags at the end which will cause rendering issues.

Here is your code with all relevant "width" calls set to fixed values. This should look good right away according to your screen resolution:

<ul id="main" style="display:block;width:805px;height:500px;min-width:500px;font-weight:normal;list-style:none;box-sizing:border-box;background-color:#066;background-image: url(https://i.postimg.cc/hPzhKC9n/Artboard-2-copy-2.png);">

<li style="display:block;width:800px;height:auto;list-style:none;box-sizing:border-box;padding:0;margin:50px auto 40px auto;"><p style="display:block;width:80%;height:auto;margin:0 auto;text-align:center;line-height: 200%;font-size:2.500rem;color:#DDA0DD."> TEXT OVER IMAGE </p></li>

<ul>

Here is your code with all "width" calls set to flexible values. This should be preferred as it increases accessibility to end-users with varying screen resolutions. You will likely have to play around with the "width" values until things are sized to your liking:

<ul id="main" style="display:block;width:60%;height:500px;min-width:500px;font-weight:normal;list-style:none;box-sizing:border-box;background-color:#066;background-image: url(https://i.postimg.cc/hPzhKC9n/Artboard-2-copy-2.png);">

<li style="display:block;width:auto;height:auto;list-style:none;box-sizing:border-box;padding:0;margin:50px auto 40px auto;"><p style="display:block;width:80%;height:auto;margin:0 auto;text-align:center;line-height: 200%;font-size:2.500rem;color:#DDA0DD."> TEXT OVER IMAGE </p></li>

</ul>

 

[Dan N]

well... having fixed values will mess up some things on smaller screens anyway, this might work

<ul id="main" style="display:block;width:60%;height:500px;min-width:500px;font-weight:normal;list-style:none;box-sizing:border-box;background-color:#DDA0DD;background-image: url(https://i.postimg.cc/hPzhKC9n/Artboard-2-copy-2.png);background-size:100% auto;background-repeat:no-repeat;background-position:0 0;"><li style="display:block;width:100%;height:auto;list-style:none;box-sizing:border-box;padding:.7em 0 1.5em;margin:0 auto;position:relative;"><p style="display:block;width:80%;height:auto;position:relative;margin:2em auto 1em auto;text-align:center;line-height:normal;font-size: calc(16px + 6 * ((100vw - 320px) / 680));font-weight:400;color:#DDA0DD;"> TEXT OVER IMAGE </p>
<p style="display:block;width:90%;height:auto;margin:0 auto;padding:.4em;font-size: calc(10px + 6 * ((100vw - 320px) / 680));font-weight:100;color:#DDA0DD;">Some text here</p><p style="display:block;width:90%;height:auto;margin:0 auto;padding:.4em;font-size: calc(10px + 6 * ((100vw - 320px) / 680));font-weight:100;color:#DDA0DD;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></li></ul>

for responsive font size I've used the formula so it will resize with screen
No need to use my suggested version, I just had a few free seconds at my disposal
Key points:
- id="main" can be removed as it does not need a generator to read the container
- background-size is set to width 100% but will not cover the entire height of the block element (you might want to reduce the height of the UL element
- if you want to have the text inside the darker area, you might want to wrap the smaller paragraph element (not the title, into a span element and set the height to 300px with overflow:auto .... basically will render a box with scrollbar and the text inside... (the ugliness from visual point of view of using fixed values)
- another method is by having the pink background set to main ul and another box (the darker rounded one) made via css markup code and no need to have tweek all the stuff so much (simpler method)
- use line-height only when absolutely necessary because this attribute on CB is very messy
Well, good luck