AlexSan
-
Posts
48 -
Joined
-
Last visited
Community Answers
-
AlexSan's post in Transparent Scrollbar Track was marked as the answer
@kaydotjpg,
The code you're using is working as intended.
However, I get what you're trying to do. The way people use to do it (setting scroll bar to overlay) is deprecated, and no longer works. It's a little more complicated to do now.
I would suggest using simplebar, however, this doesn't work on <body>, only on <div>. Take a look at this example: jsfiddle
Could also take a look at OverlayScrollbars. Not familiar with this one.
-
AlexSan's post in Custom code for UX on mobile only. was marked as the answer
@Conor03,
Sounds like you're looking for snap scrolling on mobile? Something like this: https://bodacious.be/#what_we_do
If so, this forum post may be helpful: Snap Scroll CSS on Index Page
Hope that helps!
-
AlexSan's post in How to change Category Title Font Size? was marked as the answer
@Kieron1102,
Right now, it looks like this is what it is set to. It is in a media query:
@media screen and (min-width: 768px), screen and (max-width: calc(1716.2px)) and (orientation: landscape) h2 { font-size: calc((var(--heading-2-size-value) - 1) * 1.2vw + 1rem); } Did you want it to be bigger or smaller? It may be a smart idea to keep the media query to keep the site responsive. However, if you want to edit the font-size yourself, you could try this:
.nested-category-title { font-size: 24px !important; } However, I suggest doing something like this, if you want it smaller:
@media screen and (min-width: 768px), screen and (max-width: calc(1716.2px)) and (orientation: landscape) h2 { font-size: calc((var(--heading-3-size-value) - 1) * 1.2vw + 1rem) !important; } I am just using the size value of heading 3, which is smaller than heading 2. Or if you want it bigger:
@media screen and (min-width: 768px), screen and (max-width: calc(1716.2px)) and (orientation: landscape) h2 { font-size: calc((var(--heading-1-size-value) - 1) * 1.2vw + 1rem) !important; } I am using the size value of heading 1, which is bigger than heading 2.
-
AlexSan's post in How to change colour of accordion dividers and Header 2 text was marked as the answer
@Jefferson0123 Not sure either, but I was able to find it!
Try the following code:
.sqs-block-accordion .accordion-item__title-wrapper, .sqs-block-accordion .accordion-divider { color: #7DB560; } Should look like this:
If you want the arrow to be green as well, then use this:
.sqs-block-accordion .accordion-item__title-wrapper, .sqs-block-accordion .accordion-divider, .sqs-block-accordion .arrow { color: #7DB560; } Let me know if that works.
-
AlexSan's post in Blog article footer links not displaying properly on mobile was marked as the answer
Think this would be much cleaner, looks great!
