How to tweak custom CSS in Page Settings by breakpoint [SOLVED]

I Need Help
1

I am using the following CSS code in Page Settings to swap out the standard round bullets with a Japanese ※ character:

<style>
ul.yourclass {
  padding: 0 0.5em 0 2.3em;
  position: relative;
}
ul.yourclass li {
  padding: 0.1em 0;
  list-style-type: none!important;
}
ul.yourclass li:before {
  content: "※";
  position: absolute;
  left : 1em;
}
</style>

(“yourclass” is the custom class name I gave to the List item on the page, and the original idea was from @chipy in this thread. )

The left indent looks perfect in LG, MD, and SM, but it’s indented too much at left in XS. I therefore want to know how I can tweak my code in Page Settings to eliminate the left indent only in the XS breakpoint.

Thanks.

2

You need to use media queries. When I get back home if no ones posted I will post an example.

1 Like
3

Hey @JDW,

So media queries allows you to set styles per breakpoints. Blocs obviously does this for you automatically in the class manager, but to control hand coded CSS you would do something like…

<style>

@media (min-width: 576px) {
  ul.yourclass li:before {
     content: "※";
     position: absolute;
     left : 0.5em;
  }
}
 
</style>

So your CSS is nested inside a media query. You can add as many classes inside a media query as you like.

Remember Bootstrap is mobile first, so it works small to large.

@media (min-width: 576px) { ... }

You can set max and min sizes etc.

1 Like
4

Thank you for setting me on the right path. My code is now this:

<style>
ul.yourclass {
  padding: 0 0 0 0.3em;
  position: relative;
}
ul.yourclass li {
  list-style-type: none!important;
}
ul.yourclass li:before {
  content: "※";
  position: absolute;
  left : -0.5em;
}

@media (min-width: 576px) {
ul.yourclass {
  padding: 0 0.5em 0 2.3em;
}
ul.yourclass li:before {
  left : 1em;
}}
</style>

Where everything inside the “@media” pertains to LG, MD & SM, and everything outside that applies to XS. And of course lines like position, content and list-style-type apply to all 4 breakpoints.

Thank you!

1 Like