Problem with auto-size content on mobile - tailwind

HTML & CSS
1

I have my page works well on desktop,

but it does not look good on mobile.

i want it to auto size on mobile

i want it to auto size on mobile like below image

Auto size like this on mobile
Auto size like this on mobile583×888 93.7 KB

<!DOCTYPE html>
<html lang="en" class="bg-gray-10 text-gray-95">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <link rel="stylesheet" href="http://hellowo101.rf.gd/d8d4dabcc7.css" data-precedence="next" />
    </head>
    <body>
        <div class="m-auto flex min-h-screen w-full max-w-[1280px] flex-col px-2 sm:px-10 2xl:px-0">
            <span></span><span></span>
            <div class="h-6 w-full overflow-hidden rounded-full"></div>
            <div class="relative flex w-full grow flex-col md:px-2">
                <header class="relative mx-2 mt-4 h-[700px] max-h-[700px] min-h-[700px] font-wide font-bold leading-none">
                    <svg xmlns="http://www.w3.org/2000/svg" width="1244" height="700" fill="none" viewBox="0 0 1244 700" class="absolute left-0 top-0 h-full w-full">
                        <rect width="1204" height="660" x="20" y="20" rx="200" fill="var(--gray-20)"></rect>
                        <clipPath id="rect-1-clip"><rect width="1204" height="660" x="20" y="20" rx="200"></rect></clipPath>
                        <foreignObject x="0" y="0" width="1244" height="700" clip-path="url(#rect-1-clip)">
                            <div
                                class="h-full w-full"
                                style="
                                    background-image: conic-gradient(
                                        from 93deg,
                                        rgba(205, 244, 96, 0) 35%,
                                        rgb(205, 244, 96) 35%,
                                        rgb(205, 244, 96) 46%,
                                        rgb(90, 242, 128) 60%,
                                        rgb(90, 242, 128) 75%,
                                        rgb(51, 51, 51) 100%,
                                        rgb(205, 244, 96) 100%
                                    );
                                "
                            ></div>
                        </foreignObject>
                        <clipPath id="rect-2-clip"><rect width="1140" height="596" x="52" y="52" rx="180"></rect></clipPath>
                        <foreignObject x="0" y="0" width="1244" height="700" clip-path="url(#rect-2-clip)">
                            <div class="h-full w-full" style="background-image: conic-gradient(from 93deg at 50% 50%, #75bff000 24%, #75bff0 24%, #75bff0 33%, #a17de8 50%, #a17de8 75%, #333333 100%, #75bff000 100%);"></div>
                        </foreignObject>
                        <rect width="1140" height="596" x="52" y="52" rx="180" stroke="var(--gray-10)" stroke-width="2"></rect>
                        <clipPath id="rect-3-clip"><rect width="1076" height="532" x="84" y="84" rx="160" fill="red"></rect></clipPath>
                        <foreignObject x="0" y="0" width="1244" height="700" clip-path="url(#rect-3-clip)">
                            <div
                                class="h-full w-full"
                                style="
                                    background-image: conic-gradient(
                                        from 93deg,
                                        rgba(243, 150, 232, 0) 13%,
                                        rgb(243, 150, 232) 13%,
                                        rgb(243, 150, 232) 33%,
                                        rgb(253, 184, 64) 50%,
                                        rgb(253, 184, 64) 75%,
                                        rgb(51, 51, 51) 100%,
                                        rgba(243, 150, 232, 0) 100%
                                    );
                                "
                            ></div>
                        </foreignObject>
                        <rect width="1076" height="532" x="84" y="84" rx="160" stroke="var(--gray-10)" stroke-width="2"></rect>
                        <rect width="1012" height="468" x="116" y="116" rx="140" fill="var(--gray-10)"></rect>
                        <g>
                            <circle cx="352.3973091747097" cy="664" r="15" fill="#CDF460" stroke="white" stroke-opacity="0.5" style="filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.2));"></circle>
                            <circle cx="364.3973091747097" cy="664" r="15" fill="#CDF460" stroke="white" stroke-opacity="0.5" style="filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.2));"></circle>
                            <circle cx="376.3973091747097" cy="664" r="15" fill="#CDF460" stroke="white" stroke-opacity="0.5" style="filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.2));"></circle>
                        </g>
                        <g>
                            <circle cx="600.6045870305529" cy="632" r="15" fill="#75BFF0" stroke="white" stroke-opacity="0.5" style="filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.2));"></circle>
                            <circle cx="612.6045870305529" cy="632" r="15" fill="#75BFF0" stroke="white" stroke-opacity="0.5" style="filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.2));"></circle>
                            <circle cx="624.6045870305529" cy="632" r="15" fill="#75BFF0" stroke="white" stroke-opacity="0.5" style="filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.2));"></circle>
                        </g>
                        <g>
                            <circle cx="818.4369581343279" cy="599" r="15" fill="#F396E8" stroke="white" stroke-opacity="0.5" style="filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.2));"></circle>
                            <circle cx="830.4369581343279" cy="599" r="15" fill="#F396E8" stroke="white" stroke-opacity="0.5" style="filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.2));"></circle>
                            <circle cx="842.4369581343279" cy="599" r="15" fill="#F396E8" stroke="white" stroke-opacity="0.5" style="filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.2));"></circle>
                        </g>
                        <g fill="#F2F2F2" clip-path="url(#clip0_9354_38761)" filter="url(#filter0_dd_9354_38761)" transform="translate(1106, 334), scale(0.82)">
                            <path
                                d="M22 39a5 5 0 015-5h37v11a5 5 0 01-5 5H27a5 5 0 01-5-5v-6zM64 29v5h-5a5 5 0 005-5zM64 39v-5h5a5 5 0 00-5 5zM101 34h5v5a5 5 0 00-5-5zM111 34h-5v-5a5 5 0 005 5zM106 34h37a5 5 0 015 5v6a5 5 0 01-5 5h-32a5 5 0 01-5-5V34zM64 23a5 5 0 015-5h32a5 5 0 015 5v11H64V23z"
                            ></path>
                        </g>
                        <defs>
                            <filter id="filter0_dd_9354_38761" width="188" height="76" x="-9" y="0" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
                                <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                                <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix>
                                <feMorphology in="SourceAlpha" radius="2" result="effect1_dropShadow_9354_38761"></feMorphology>
                                <feOffset dy="4"></feOffset>
                                <feGaussianBlur stdDeviation="12"></feGaussianBlur>
                                <feComposite in2="hardAlpha" operator="out"></feComposite>
                                <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"></feColorMatrix>
                                <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_9354_38761"></feBlend>
                                <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix>
                                <feMorphology in="SourceAlpha" operator="dilate" radius="1" result="effect2_dropShadow_9354_38761"></feMorphology>
                                <feOffset dy="2"></feOffset>
                                <feGaussianBlur stdDeviation="4"></feGaussianBlur>
                                <feComposite in2="hardAlpha" operator="out"></feComposite>
                                <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"></feColorMatrix>
                                <feBlend in2="effect1_dropShadow_9354_38761" result="effect2_dropShadow_9354_38761"></feBlend>
                                <feBlend in="SourceGraphic" in2="effect2_dropShadow_9354_38761" result="shape"></feBlend>
                            </filter>
                            <clipPath id="clip0_9354_38761"><path fill="#fff" d="M0 0H144V32H0z" transform="translate(13 18)"></path></clipPath>
                        </defs>
                    </svg>

                    <div class="absolute left-0 top-0 flex h-full w-full flex-col items-center justify-center gap-4">
                        <h2 class="px-[4rem] text-center text-[50px] !tracking-[-0.03em] md:w-full md:text-[60px] lg:px-[9rem] lg:text-[85px]">Eart Pas</h2>
                        <span class="w-2/3 px-4 text-center font-sans text-base font-normal leading-tight text-gray-60 md:w-full md:px-0 md:text-lg">Earth, Mars, Jupitar</span>
                        <div class="mt-6 flex flex-col items-center gap-8 md:flex-row">
                            <a
                                class="transition-all active:scale-95 select-none rounded-full font-mono uppercase flex items-center justify-center gap-2 text-center subpixel-antialiased focus:outline-highlight focus:ring-0 border whitespace-nowrap group text-sm h-8 min-w-[2rem] border-transparent bg-gray-95 text-gray-10 hover:bg-gray-85 disabled:bg-gray-50 disabled:text-gray-30 px-3 py-3 pr-2 font-light md:px-6 md:py-6 md:pr-2 md:text-base"
                                href="/app/coins"
                            >
                                To the moon
                                <svg width="37" height="36" viewBox="0 0 37 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        fill-rule="evenodd"
                                        clip-rule="evenodd"
                                        d="M33.5 18C33.5 9.71573 26.7843 3 18.5 3C10.2157 3 3.5 9.71573 3.5 18C3.5 26.2843 10.2157 33 18.5 33C26.7843 33 33.5 26.2843 33.5 18ZM23.1544 18.75L19.1848 22.7197C18.8919 23.0126 18.8919 23.4874 19.1848 23.7803C19.4776 24.0732 19.9525 24.0732 20.2454 23.7803L24.4348 19.591C25.3134 18.7123 25.3134 17.2877 24.4348 16.409L20.2454 12.2197C19.9525 11.9268 19.4776 11.9268 19.1848 12.2197C18.8919 12.5126 18.8919 12.9874 19.1848 13.2803L23.1544 17.25H11.7501C11.3359 17.25 11.0001 17.5858 11.0001 18C11.0001 18.4142 11.3359 18.75 11.7501 18.75H23.1544Z"
                                        fill="#4D4D4D"
                                    ></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                    <div class="pointer-events-none absolute left-1/3 top-4" style="transform: translateX(22.0739px) translateY(-9.91126px) translateZ(0px);">
                        <div class="absolute left-7 top-7 z-50 flex items-center justify-center gap-1 rounded-full bg-gray-100 p-[2px] pr-1">
                            <div class="mr-1 h-6 w-6"></div>
                            <span class="text-md font-mono text-gray-0/80">5</span>
                            <img src="http://hellowo101.rf.gd/1svg.svg">
                        </div>
                    </div>
                    <div class="pointer-events-none absolute left-9 top-1/2" style="transform: translateX(-5.85802px) translateY(22.3368px) translateZ(0px);">
                        <div class="[2px] absolute left-7 top-7 z-50 flex items-center justify-center gap-1 rounded-full bg-gray-100 p-[2px] pr-1">
                            <div class="mr-1 h-6 w-6"></div>
                            <span class="text-md font-mono text-gray-0/80">7</span>
                            <img src="http://hellowo101.rf.gd/2svg.svg">
                        </div>
                    </div>
                    <div class="pointer-events-none absolute left-1/2 bottom-14" style="transform: translateX(0.529769px) translateY(-5.85802px) translateZ(0px);">
                        <div class="[2px] absolute left-7 top-7 z-50 flex items-center justify-center gap-1 rounded-full bg-gray-100 p-[2px] pr-1">
                            <div class="mr-1 h-6 w-6"></div>
                            <span class="text-md font-mono text-gray-0/80">9</span>
                            <img src="http://hellowo101.rf.gd/3svg.svg">
                        </div>
                    </div>
                </header>
            </div>
        </div>
    </body>
</html>
2

SVG isn’t really my thing but I guess you wold need to make the svg stretch its height and width and not maintain aspect ratio. That would mean using 100% width and heights and adding preserveAspectRatio="none .

e.g.

However that would result in the box squishing at narrower widths as seen above so you’d probably need to use some fixed measurements for the lines. It may be better if you wait for someone better at svg to pop along and take a look :slight_smile:

If you wanted an approximation in css you could do something much much simpler but won’t looks as sharp as the svg.

(Note that your other elements on your page and are not really in sync with the lines as you have absolutely placed them but without a proper context. It may work on your screen but they were all over the place on my screen although I could not see your images in codepen as it needs https.)

1 Like
3

thanks for your response, its really good. the only problem is that fonts are not seen and even the icons are backward of that inner black color, where by fonts or text and those icons needs to be front

here is what i get if i combine everything
i will be glad if u can complete this in css as u did, i dont care about not using svg, am ok with it in css without svg

this is wat i get

font1
font11728×920 78.3 KB

4

i think the background needs to be transparent in the middle of the rounded colored

5

You’d just need to raise the z-index above 3 on the elements that you are absolutely placing on top so that they sit on top of the black background and not under it. I’m offline at the moment but will give an example tomorrow :slight_smile:

6

Ok i will be waiting, thank you so much

7

Hmm I think this may be too complex due to the gradient angles moving when the page is resized. It may be that you will need to try and manipulate the original svg

The best I can come up with in CSS is as follows.

Its not quite the same but it does scale down to mobile.

round lines v2
round lines v2750×1334 108 KB

1 Like
8

thank you so much

9

This one has slightly wider borders.

1 Like
10

Simplifying the SVG for the arrow:

3 Likes
12

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.