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…

Hi Vincent,
I need your help again…

I have a collection list.
Need it to show ONLY the first child or hide all other children in the list.

I think the code below is half-way correct:

.ci-left-shade-off:first-child

What more do I need to add?

Thanks.

Sorry I don’t get that. If you need to show only the first item of a collection list, then just use the Limit in the Settings panel: “Show 1 item start at n”

image

As for the code, you apply it to the class of the child, not the parent

<style>
.class-of-the-child {display:none}
.class-of-the-child:first-child {display:block}    /* block or flex or whatever it is normally set on  */
</style>

Dear Vincent and Per,

I would like to my drop caps to have different font sizes on each breakpoint (desktop, tablet, mobile landscape and mobile portrait). I tried adding @media (max-width: 991px) but it does not seem to be working. Could you please have a look at my custom code? What am I doing wrong?

Best,
Joep

p:first-child:first-letter @media (max-width: 991px) { display: inline; float: left; padding-top: 0px; margin-right: 5px; font-size: 65px; line-height: 100%; font-weight: 700; }

Let’s see if this displays the code better:

<style>
p:first-child:first-letter @media (max-width: 991px) { 
display: inline; 
float: left; 
padding-top: 0px; 
margin-right: 5px; 
font-size: 65px; 
line-height: 100%; 
font-weight: 700; 
}
</style>

@joepfreedomlab - Review the correct syntax at Beginner's guide to media queries - Learn web development | MDN

1 Like

Thank you! I’ll take a look at it this week.

Best,
Joep

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

The hacky way:

  • drop a text element
  • give it the class of your dropcap
  • set the font size for every breakpoint
  • archive that text element in a hidden page like “style guide” so that Webflow don’t erase that rule when you clean up the classes