Streaming live at 10am (PST)

Changing Custom CSS Dependent on Breakpoint

Hi there! Just looking for some help with some CSS code.

I’ve found some code online to cut the corners from a Div diagonally and it works perfect when published for the desktop breakpoint but I can’t figure out how to change the value on the other breakpoints.

The code I have in the before body tag at the moment is as follows. But the value appears the same on every breakpoint, so I must be doing something wrong as I have zero experience with code:

<style>
.test {    
  clip-path: 
    polygon(
      0% 0%,                 /* top left */
      100% 0%,                 /* top right */
      100% calc(100% - 1.5vw),  /* bottom right */
      calc(100% - 1.5vw) 100%,  /* bottom right */
      0% 100%,               /* bottom left */
      0 0     /* bottom left */
      );
}
</style>


<style>
@media screen and (max-width: 479px)
.test {    
  clip-path: 
    polygon(
      0% 0%,                 /* top left */
      100% 0%,                 /* top right */
      100% calc(100% - 6vw),  /* bottom right */
      calc(100% - 6vw) 100%,  /* bottom right */
      0% 100%,               /* bottom left */
      0 0     /* bottom left */
      );
}
</style>

<style>
@media screen and (max-width: 767px)
.test {    
  clip-path: 
    polygon(
      0% 0%,                 /* top left */
      100% 0%,                 /* top right */
      100% calc(100% - 5vw),  /* bottom right */
      calc(100% - 5vw) 100%,  /* bottom right */
      0% 100%,               /* bottom left */
      0 0     /* bottom left */
      );
}
</style>

<style>
@media screen and (max-width: 991px)
.test {    
  clip-path: 
    polygon(
      0% 0%,                 /* top left */
      100% 0%,                 /* top right */
      100% calc(100% - 7vw),  /* bottom right */
      calc(100% - 7vw) 100%,  /* bottom right */
      0% 100%,               /* bottom left */
      0 0     /* bottom left */
      );
}
</style>

Please see a read only example link below:

Thanks in advance.

Nik


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

You are missing brackets for each media query that your css must be placed within.


1 Like

Thank you for the reply Jeff. Sorry I’ve tried brackets in a few places within the code but can’t figure out where they would go to make it work.

<style>
@media screen and (max-width: 479px)
.test {    
  clip-path: 
    polygon(
      0% 0%,                 /* top left */
      100% 0%,                 /* top right */
      100% calc(100% - 6vw),  /* bottom right */
      calc(100% - 6vw) 100%,  /* bottom right */
      0% 100%,               /* bottom left */
      0 0     /* bottom left */
      );
}
</style>

Could you show me an example of where they would go in the above code?

Thank you so much.

@media screen and (max-width: 479px) {
    .test {...}
}
1 Like

Perfect that works Jeff. Thank you for your help!

1 Like