Streaming live at 10am (PST)

Custom code - Not on desktop

Hi all,

Need help again…
I’m NOT a coder but managed to get this piece of code to work on a collection list.

.ci-index:first-child .index-wrapper{
margin-left: 50px;
}
.ci-index:last-child .index-wrapper{
margin-right: 50px;
}

However, I ONLY want this to happen in iPad and mobile mode.
How do I disable it on desktop?
What code can I add?

Thanks for your help…

To address responsivity, we use media queries to define breakpoints. Webflow has breakpoints already set for you, so it’s just a matter of adding the correct one before your code.

For instance:

@media (max-width: 991px) {
.ci-index:first-child .index-wrapper {margin-left: 50px}
.ci-index:last-child .index-wrapper {margin-right: 50px}
}

So those CSS rules will only apply when the viewport has a width of less than 991px. (I fixed your code, don’t use the ; character when you only have 1 property in your CSS rule.)

1 Like

Thanks Vincent for the swift reply.

However, I just realised I need more help with the same code.

What if I need different margins for either breakpoints (ipad and the 2 mobile breakpoints)?
Do I need to add the same code 4 times with different max. widths and margins for each breakpoint?

Thanks in advance :slight_smile:

Yes, tout à fait. Here’s the declarations for tablets, phone landscape and phone portrait as Webflow defines them:

@media (max-width: 991px) {
.ci-index:first-child .index-wrapper {margin-left: 50px}
.ci-index:last-child .index-wrapper {margin-right: 50px}
}

@media (max-width: 767px) {
.ci-index:first-child .index-wrapper {margin-left: 30px}
.ci-index:last-child .index-wrapper {margin-right: 30px}
}

@media (max-width: 479px) {
.ci-index:first-child .index-wrapper {margin-left: 20px}
.ci-index:last-child .index-wrapper {margin-right: 20px}
}

Understand that those values are the ones used by Webflow. You can totally change them, or add extra ones. I advise you to read about CSS Media Queries, there’s a lot you can do with them and at times it will solve your responsivity issues.

2 Likes

Brilliant… Thanks so much…

Hi Vincent,

Can you help me again?

I need the changes on the last-child in a collection to happen in all breakpoints.
How is the easiest way to do?

I tried and came up with this but there must be an “all breakpoints” code instead of max: 5000px:

@media (max-width: 5000px) { .ci-testing:last-child .card-text-wrapper {display: none} .ci-testing:last-child .card-wrapper {background-color: #000000} }

Thanks :slight_smile:

Just add the code, skip the media query part.

<style>
.ci-testing:last-child .card-text-wrapper {display: none} 
.ci-testing:last-child .card-wrapper {background-color: #000000} 
</style>
1 Like

Awesome. Thanks again…