Why Gemini/Claude can't fix this? :/

[sered4k]

I made a website that was running on Cargo Collective template (Similar to Square Space) with two side by side independently active areas with my projects, and with help of Gemini I was able to make mobile version to show two modules stacked on top of each other.

Two simple issues these LLM's can't seem to fix:

• when i gradually make the website smaller in the browser, there is a weird in between layout before it shows proper mobile view. How can I start mobile layout from that point and not after this weird in between layout?
• On mobile when I scroll all the way down at each area, the scrolling seems to get "stuck"

Is it something I can fix in Cargo Collective layout builder where I can visually control padding and other things or better to fix through CSS. I have access to both: page-only local CSS/HTML and site-wide versions.

Below pasting the site wide CSS. Would really appreciate the fix for these!

html {

--mobile-scale: 1.5;

--mobile-padding-offset: 1;

}



body {

--swatch-1: rgba(0, 0, 0, 0.85);

--swatch-2: rgba(0, 0, 0, 0.75);

--swatch-3: rgba(0, 0, 0, 0.6);

--swatch-4: rgba(0, 0, 0, 0.4);

--swatch-5: rgba(0, 0, 0, 0.25);

--swatch-6: rgba(0, 0, 0, 0.15);

}



body.mobile {

}



a:active,

.linked:active,

.zoomable::part(media):active {

opacity: 0.7;

}



.page a.active {

}



sub {

position: relative;

vertical-align: baseline;

top: 0.3em;

}



sup {

position: relative;

vertical-align: baseline;

top: -0.4em;

}



.small-caps {

font-variant: small-caps;

    text-transform: lowercase;

}



ol {

margin: 0;

padding: 0 0 0 2.5em;

list-style-type: decimal-leading-zero;

}



ul {

margin: 0;

padding: 0 0 0 2.0em;

}



ul.lineated {

margin: 0;

padding: 0;

list-style-type: none;

margin: 0 0 0 3em;

text-indent: -3em;

}



blockquote {

margin: 0;

padding: 0 0 0 2em;

}



hr {

background: rgba(0, 0, 0, 0.15);

border: 0;

height: 1px;

display: block;

margin-top: 0.5rem;

margin-bottom: 0.5rem;

}



.content {

border-color: rgba(0,0,0,.85);

}



bodycopy {

font-size: 1.05rem;

font-weight: 450;

color: rgba(0, 0, 0, 0.85);

font-family: "Diatype Variable";

font-style: normal;

line-height: 1.1;

letter-spacing: 0em;

display: block;

font-variation-settings: 'slnt' 0, 'MONO' 0;

}



bodycopy a {

color: rgba(0, 0, 0, 0.85);

text-decoration: none;

}



bodycopy a:hover {

}



h1 {

font-family: "Diatype Mono Variable";

font-style: normal;

font-weight: 400;

margin: 0;

font-size: 5.2rem;

line-height: 1;

color: rgba(0, 0, 0, 0.85);

letter-spacing: 0em;

font-variation-settings: 'slnt' 0, 'MONO' 1;

font-feature-settings: "zero";

}



h1 a {

color: rgba(0, 0, 0, 0.85);

text-decoration: none;

}



h1 a:hover {

}



h2 {

font-family: "Diatype Variable";

font-style: normal;

font-weight: 500;

margin: 0;

color: rgba(0, 0, 0, 0.75);

font-size: 2.4rem;

line-height: 1.15;

letter-spacing: 0em;

font-variation-settings: 'slnt' 0, 'MONO' 0;

}



h2 a {

color: rgba(0, 0, 0, 0.75);

text-decoration: none;

}



h2 a:hover {

}



.caption {

font-size: 1.05rem;

font-weight: 450;

color: rgba(0, 0, 0, 0.85);

font-family: "Diatype Mono Variable";

font-style: normal;

line-height: 1.1;

letter-spacing: 0em;

display: block;

font-variation-settings: 'slnt' 0, 'MONO' 0;

}



.caption a {

color: rgba(0, 0, 0, 0.85);

text-decoration: underline;

}



.caption a:hover {

}



media-item .caption {

margin-top: .5em;

}



gallery-grid .caption,

gallery-columnized .caption,

gallery-justify .caption {

margin-bottom: 2em;

}



[thumbnail-index] .caption {

}



[thumbnail-index] .caption .tags {

margin-top: 0.25em;

}



.page {

justify-content: flex-start;

}



.page-content {

padding: 0.5rem;

text-align: left;

border-color: rgba(0, 0, 0, 0.15);

border-style: solid;

border-width: 0.0rem;

}



.mobile [id] .page-layout {

max-width: 100%;

}



.mobile [id] .page-content {

}



.page-layout {

align-items: flex-start;

max-width: 50%;

}



media-item::part(media) {

border: 0;

padding: 0;

}



.quick-view {

height: 100%;

width: 100%;

padding: 3rem;

margin-top: auto;

margin-right: auto;

margin-bottom: auto;

margin-left: auto;

}



.quick-view-background {

background-color: #ffffff;

}



.quick-view .caption {

color: rgba(255, 255, 255, 1.0);

padding: 20px 0;

text-align: center;

transition: 100ms opacity ease-in-out;

position: absolute;

bottom: 0;

left: 0;

right: 0;

}



.quick-view .caption-background {

padding: 0.5rem 1rem;

display: inline-block;

background: rgba(0, 0, 0, 0.5);

border-radius: .5rem;

text-align: left;

max-width: 50rem;

}



.mobile .quick-view {

width: 100%;

height: 100%;

margin: 0;

padding: 10px;

}



.mobile .quick-view .caption {

padding: 10px 0;

}



.mobile .quick-view .caption-background {

max-width: 100vw;

}



::part(slideshow-nav) {

--button-size: 30px;

--button-inset: 20px;

--button-icon-color: rgba(255, 255, 255, 0.9);

--button-icon-stroke-width: 1.5px;

--button-icon-stroke-linecap: none;

--button-background-color: rgba(87, 87, 87, 0.35);

--button-background-radius: 50%;

--button-active-opacity: 0.7;

}



gallery-slideshow::part(slideshow-nav) {

--button-inset: 15px;

}



.quick-view::part(slideshow-nav) {

}



.wallpaper-slideshow::part(slideshow-nav) {

}



.mobile ::part(slideshow-nav) {

--button-inset: 10px;

}



.mobile .quick-view::part(slideshow-nav) {

--button-inset: 25px;

}



shop-product {

font-size: 1.2rem;

max-width: 22rem;

font-family: "Diatype Variable";

font-style: normal;

font-weight: 400;

font-variation-settings: 'slnt' 0, 'MONO' 0;

letter-spacing: 0em;

margin-bottom: 1em;

}



shop-product::part(price) {

color: rgba(0, 0, 0, 0.75);

line-height: 1.1;

margin-bottom: 0.5em;

}



shop-product::part(dropdown) {

width: 100%;

color: rgba(0, 0, 0, 0.85);

border: 1px solid rgba(0, 0, 0, 0.2);

background-color: rgba(255, 255, 255, 0.0);

background-image: url(https://static.cargo.site/assets/images/select-line-arrows.svg);

background-repeat: no-repeat;

background-position: top 0em right .1em;

line-height: 1.2;

padding: 0.58em 2em 0.55em 0.9em;

border-radius: 10em;

margin-bottom: 0.5em;

}



shop-product::part(button) {

background: rgba(0, 0, 0, 0.15);

color: rgba(0, 0, 0, 0.75);

text-align: left;

line-height: normal;

padding: 0.5em 1em;

cursor: pointer;

border-radius: 10em;

}



shop-product::part(button):active {

opacity: .7;

}



audio-player {

--text-color: rgba(0, 0, 0, 0.85);

--text-padding: 0 1.2em 0 1.0em;

--background-color: rgba(255, 255, 255, 0);

--buffer-background-color: rgba(0, 0, 0, 0.03);

--progress-background-color: rgba(0, 0, 0, 0.075);

--border-lines: 1px solid rgba(0, 0, 0, 0.2);

font-size: 1.2rem;

width: 32rem;

height: 2.75em;

font-family: "Diatype Variable";

font-style: normal;

font-weight: 400;

font-variation-settings: 'slnt' 0, 'MONO' 0;

line-height: normal;

letter-spacing: 0em;

margin-bottom: 0.5em;

border-radius: 10em;

}



audio-player::part(button) {

--icon-color: rgba(0, 0, 0, 0.85);

--icon-size: 32%;

--play-text: '';

--pause-text: '';

width: 3.15em;

display: inline-flex;

justify-content: center;

cursor: pointer;

}



audio-player::part(play-icon) {

padding-left: 0.6em;

}



audio-player::part(pause-icon) {

padding-left: 0.4em;

}



audio-player::part(progress-indicator) {

border-right: 1px solid rgba(0, 0, 0, 0);

height: 100%;

cursor: ew-resize;

}



audio-player::part(separator) {

border-right: var(--border-lines);

}



body.mobile audio-player {

max-width: 100%;

}



media-item {

--scroll-animation-mode: animation;

--scroll-animation: scrollAnimationFlyIn-2;

--scroll-animation-timing: cubic-bezier(0.39, 0.575, 0.565, 1);

}



@keyframes scrollAnimationFlyIn-2 {

0% { transform: translateY(10vh); }

30% { transform: scale(1); }

70% { transform: scale(1); }

100% { transform: scale(1); }

}



.mobile .content {

}



/* MOBILE SPLIT SCREEN - NO EXTRA PADDING */

@media screen and (max-width: 767px) {



    /* --- GROUP 1: TOP HALF (Architecture + Index Group 1) --- */



    /* 1. The Headers */

    [page-url="header-left-1"],

    [page-url="header-left-2"] {

        top: 0 !important;

        left: 0 !important;

        width: 100% !important;

        height: auto !important;

        z-index: 60 !important;

        position: fixed !important;

    }



    /* 2. The Content */

    [page-url="left-page"],

    [page-url="index-group-01"] {

        top: 0 !important;

        left: 0 !important;

        width: 100% !important;

        height: 50% !important;     

        z-index: 50 !important;

        position: fixed !important;

        border-bottom: 2px solid #000;

        padding-top: 0 !important;

        padding-bottom: 0 !important;

        box-sizing: border-box !important;

    }

    

    [page-url="left-page"] .page-content,

    [page-url="index-group-01"] .page-content {

        padding-bottom: 10px !important;

    }



    /* --- GROUP 2: BOTTOM HALF (Art + Index Group 2) --- */



    /* 3. The Headers */

    [page-url="header-right"],

    [page-url="header-right-2"] {

        top: 50% !important;       

        left: 0 !important;

        width: 100% !important;

        height: auto !important;

        z-index: 60 !important;

        background: transparent;   

        position: fixed !important;

        margin-top: -1px;           

    }



    /* 4. The Content */

    [page-url="right-page"],

    [page-url="index-group-02"] {

        top: 50% !important;       

        left: 0 !important;

        width: 100% !important;

        height: 50% !important;     

        z-index: 50 !important;

        position: fixed !important;

        padding-top: 0 !important;

        padding-bottom: 0 !important;

        box-sizing: border-box !important;

    }

    

    [page-url="right-page"] .page-content,

    [page-url="index-group-02"] .page-content {

        padding-bottom: 10px !important;

    }



    /* --- SCROLLING FIX --- */

    .page.pinned.allow-scroll {

        overflow-y: auto !important;

        -webkit-overflow-scrolling: touch;

    }



    /* --- THUMBNAIL GRID FIX --- */

    /* Apply to BOTH index groups to ensure consistency */

    [page-url*="index-group"] .column-set,

    [page-url*="index-group"] .thumbnails,

    [page-url="index-group-01"] .column-set,

    [page-url="index-group-01"] .thumbnails,

    [page-url="index-group-02"] .column-set,

    [page-url="index-group-02"] .thumbnails {

        display: grid !important;

        grid-template-columns: 1fr 1fr !important;

        gap: 10px !important;       

        width: 100% !important;

        height: auto !important;

    }



    [page-url*="index-group"] .column-unit,

    [page-url*="index-group"] .thumb_image,

    [page-url="index-group-01"] .column-unit,

    [page-url="index-group-01"] .thumb_image,

    [page-url="index-group-02"] .column-unit,

    [page-url="index-group-02"] .thumb_image {

        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

    }

    

    /* CRITICAL FIX: Force thumbnail sizing on ALL images in index groups */

    /* This prevents full-screen images from appearing */

    [page-url="index-group-01"] media-item,

    [page-url="index-group-01"] media-item img,

    [page-url="index-group-01"] media-item::part(media),

    [page-url="index-group-02"] media-item,

    [page-url="index-group-02"] media-item img,

    [page-url="index-group-02"] media-item::part(media) {

        width: 100% !important;

        max-width: 100% !important;

        height: auto !important;

        max-height: 150px !important;

        min-height: 0 !important;

        object-fit: cover !important;

        display: block !important;

    }

    

    /* Additional catch-all for any images in the bottom section */

    [page-url="index-group-02"] img {

        max-height: 150px !important;

        width: auto !important;

        max-width: 100% !important;

        object-fit: cover !important;

    }

    

    /* Ensure thumbnail-index elements are properly constrained */

    [page-url="index-group-02"] thumbnail-index {

        max-height: 200px !important;

        overflow: hidden !important;

    }

}



.split-row {

    display: flex;

    justify-content: space-between;

    width: 100%;

    align-items: baseline;

}

 

[tomliv]

Wow. That structure is... very odd. This is using a drag-n-drop builder? A template? Been looking at this for 20 minutes and can't wrap my head around this.

I'd fix by re-doing the structure, if possible: Each photo and related copy in a container for each item. All architecture items in a container (div or section). All public items in a container (div or section). Wrap these two in a overall container. Stack the two containers when desired.

 

[sered4k]

Wow. That structure is... very odd. This is using a drag-n-drop builder? A template? Been looking at this for 20 minutes and can't wrap my head around this.

I'd fix by re-doing the structure, if possible: Each photo and related copy in a container for each item. All architecture items in a container (div or section). All public items in a container (div or section). Wrap these two in a overall container. Stack the two containers when desired.

The CSS has been rewritten from the default template to make two viewing sections stacked on top of each other rather than in parallel how it was in the original. I tried to give these instructions to Gemini, it suggested to also altering HTML, along with CSS, but that did break the existing layout..

 

[tomliv]

Are you able to alter the HTML for this two-col layout??

 

[sered4k]

Are you able to alter the HTML for this two-col layout??

Yep! my site-wide HTML is currently empty, while the local page html is below:

<column-set gutter="0.6rem" mobile-stack="false"><column-unit slot="0" span="6">BOGDAN SEREDYAK</column-unit><column-unit slot="1" span="3"><a href="index-group-01" rel="history">Index</a></column-unit><column-unit slot="2" span="3"><div style="text-align: right"><a href="cv" rel="history">Info</a></div></column-unit></column-set>

 

[tomliv]

Sorry, not familiar with the builder you are using. Are these elements custom elements from the builder tool?

 

[sered4k]

Sorry, not familiar with the builder you are using. Are these elements custom elements from the builder tool?

Yup. This is how it looks like.
Highlighted in yellow button gives access to site-wide html/css, while "<>" button on top for local page html/css

 

[tomliv]

Here's a quick sample of where my head is at for this...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
    
    <style>
        /* SIMPLE RESET */
        *{
            box-sizing: border-box;
            margin: 0;
        }
        
        .wrapper{
            margin: 1rem;
        }
        .item{
            text-decoration: none;
            
            & img{
                display: block;
                height: 100%;
                width: 100%;
                aspect-ratio: 16 / 9;
            }
            
            & figcaption{
                font-family: arial, sans-serif;
                color: black;
                display: flex;
                gap: 1rem;
                padding-block: .5rem;
                
                & h3{
                    font-size: clamp(1rem, 1.471vw + 0.529rem, 2rem);
                    flex: 1;
                }
                & p{
                    font-size: clamp(0.75rem, 0.368vw + 0.632rem, 1rem);
                    flex: 1;
                }
                & span{
                    text-decoration: underline;
                }
                
            }
        }
        
        @media (width >= 48rem){
            .wrapper{
                display: flex;
                gap: 1rem;   
            }
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <section class="col">
            <h2>Architecture</h2>
            
            <a href="" class="item">
                <figure>
                    <img src="https://freight.cargo.site/w/900/q/75/i/Z2777556071702372410042571409966/Communicator-3-2.jpg" alt="" width="900" height="600">
                    <figcaption>
                        <h3>Communicator</h3>
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.<br>
                            <br>
                            <span>View</span>
                        </p>
                    </figcaption>
                </figure>               
            </a>
        </section>
        
        <section class="col">
            <h2>Public</h2>
            
            <a href="" class="item">
                <figure>
                    <img src="https://freight.cargo.site/w/900/q/75/i/Z2777556071702372410042571409966/Communicator-3-2.jpg" alt="" width="900" height="600">
                    <figcaption>
                        <h3>Communicator</h3>
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.<br>
                            <br>
                            <span>View</span>
                        </p>
                    </figcaption>
                </figure>               
            </a>
        </section>
    </div>
</body>
</html>

 

[sered4k]

hmm, this looks interesting but messes up the layout. Actually, that html was only for the "footer" or the menu at the bottom, what I just realized. The main site-wide HTML is empty...

 

[tomliv]

hmm, this looks interesting but messes up the layout. Actually, that html was only for the "footer" or the menu at the bottom, what I just realized. The main site-wide HTML is empty...

My sample is just to show what I am talking about. You would need to adjust to suit or recreate in the tool.

 

[Zero1]

I’ve worked with Cargo Collective before, and their fixed-positioning logic can be a real headache on mobile! The "weird in-between layout" happens because your media query kicks in at 767px, but the desktop flexbox/max-width starts breaking earlier. Try changing <code>(max-width: 767px)</code> to <code>(max-width: 1024px)</code> to trigger the stack sooner. For the "stuck" scrolling, you likely have a conflict between <code>position: fixed</code> and <code>overflow: auto</code>. Try adding <code>-webkit-overflow-scrolling: touch;</code> specifically to the container with the fixed height. Honestly, dealing with these CSS quirks is so much more satisfying when you're working for yourself. I actually switched to full-time freelance to see if I could out-earn my old office salary, and it’s been a total success! I found all the best strategies and dev-growth guides on madcash.pro — it’s a brilliant resource for anyone looking to gain financial independence and work on their own terms. Hope this helps you fix that mobile stack!