when I use it, I only see this. And with the transparent background, I can’t tell if the image is the full width.
Make sure the preview is turned on. It seems that none of the code is working for you.
1 Like
I turned it on but nothing changed.
Can you provide a screenshot of what you’ve configured, including the Custom CSS?
Or change with this code:
/*Hide Navbar*/
#page-root:has(.slide-Show):has([class*="mobile-nav-bar"]) [data-testid="wire-container"] {
background-color: transparent !important;
padding-top: 0;
}
/*Container padding*/
#page-root:has(.slide-Show):has([class*="mobile-nav-bar"]) .slide-Show > div > div > div > div {
padding:0 !important;
width: 100%;
//margin-top: calc(30px - var(--safe-area-inset-top));
}
/*Hide Container background*/
.mobile-layer #main-root:has(.slide-Show) .slide-Show {
background: transparent !important;
}
.mobile-layer #main-root:has(.slide-Show) [data-testid="card-image"]{
height:300px;
}
.mobile-layer #main-root:has(.slide-Show) [data-testid="wire-component-stack-slide-Show"] > div > div > div, .mobile-layer #main-root:has(.slide-Show) [data-testid="card-image"] > div, .mobile-layer #main-root:has(.slide-Show) [data-testid="card-image"] img, #page-root:has(.slide-Show) [data-testid="cc-card"]{
border-radius:0;
padding:0px;
}
Note: This code update allows for a variety of styles that you can apply.
1 Like
I replaced it with the new code but still no change.
The css was clipped from your posts.
Question… is the div brackets ok in the code? It’s pointing the opposite direction from other codes that I’ve used.
You are setting the background of the container instead your collection component. 
Leave the container in the “none” state or switch it to “accent.”
1 Like
still no luck. I will try changing the “> div” to “</div/>”
… made no difference either. lol
There seems to be a bit of an issue. I’m concerned there might be conflicting CSS. Could you try clearing and copying your CSS to another location to test it?
we’re thinking alike now. I just tried that too. Nothing…
but I will try adding your first code again, with the CSS section clear.
… that didn’t work either. Could it be that your image just isn’t compatible with my location? Do you have another image we can try?
The CSS code I provided should work, at least there should be some changes. If in your CSS you use “/*” and do not close it with “*/” then all the code below it will not work.
I’m just using the same code that you supplied so I’m mystified.
With a different image, I get this:
Can you test the code with this to see if it works for you?
<img src="https://img.freepik.com/free-photo/abstract-colorful-splash-3d-background-generative-ai-background_60438-2509.jpg?w=1380&t=st=1715490970~exp=1715491570~hmac=f84c220ffc29e8e1e6d23af30582bf03b17688b27511d93b4977f30352eeaa79.png" alt="Description of the image" style="height: auto; width: 100%; display: block; margin: 0 auto;">
It seems the issue is here. Why are you still using the title component?
Using collection and richtext should be enough:
I just kept it there for reference. When I removed the other components, it didn’t solve the problem. But I can remove it again if you think I should.
My code is designed for the collection, not for the title component. Perhaps you remove it first, then after testing, you can put it back (turn off its visibility).
1 Like
ok. So it needs to be a collection? maybe our wires got a little crossed then.
Tell me which components you prepared the code for and I’ll set it up. Just those in the image there?
I thought we were doing everything through the rich text, that’s why i didn’t include a collection component.
This:
As you know, only collections and custom collections allow for clicking. However, the image component, if not inside a custom collection, will only navigate to the first row when clicked.
Richtext is just to hold your logo.
oohhh. I understand your thought process now. Ok
I prepared it like in your diagram and copied the code and class but the main image still doesn’t reach to the edge. It’s ok though. Eventually, it will happen. 
For now, I’ll work with it as is.
- It’s still really nice and it’s clickable so massive improvement!
Basic explanation:
- If you are using a collection, this is a list-type component. Therefore, you just need to filter to display the corresponding row number based on the “Index to show” above.
- If you are only using the image component, which is basically a single (non-list) component, then all images need to be collected in an array to be displayed according to the index from the “Index to show”. There is no filter option here. And only one action, which usually refers to the first row from clicking on any image that appears. The same goes for images within the title component options.
Show me which components you are using in the left panel. Why do I still see the search element above it?
1 Like
lol, I didn’t customize the settings on the right side. I only rebuilt the left side with the components you listed and did the coding part.
This is the left:
Has it worked? After you turned off the search option.