nathan.j.p

Add to Design > Custom CSS
header#header.shrink a { color: black; opacity: 1; } header#header.shrink img { filter: invert(1); } header#header.shrink use { fill: black !important; stroke: black !important; }  

I'm seeing it in Chrome, but once I scroll down the page and scroll back up the problem goes away. It seems to be loading some fixed width element that isn't visible above the fold initially, but that goes away on scroll.

It's not straight forward enough of an issue for me to pinpoint myself.

The downside to modify font-size for single blocks using code is deciding where the tedium of customization ends. It is best to set up your font-sizes to work out of the box across your website, and by best I mean, it's an y easy rabbit hole to fall in and get distracted with. Speaking from experience.

Try adding to Design > Custom CSS
.blog-single-column .blog-single-column--container>div:first-child { max-width: 500px; width: 90%; } .blog-single-column .blog-single-column--container { justify-content: center; align-items: center; }  

See this guide
 

try the below in Design > Custom CSS
 
.product-price::before { content: "from"; } if you wish to style the word "from"  further you can do so inside that same rule.
eg:
.product-price::before { content: "from"; font-size: .9rem; color: #A3826C; }  

Did this question ever get answered/resolved?  We would like to show booked slots to clearly show all time slots that are usually available and which are booked. Is there an option in Acuity Scheduling to do that?  Thank you.

I would also like to see this functionality.

Is there a way in Acuity Scheduling to grey out classes that are fully booked, rather than removing the option entirely? Displaying a greyed-out slot could be useful to indicate that the time is typically available, even if it's fully booked in this specific instance. Removing the slot from the user interface may give the impression that the time slot is not usually offered.

Add to Page Header
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("header#header a.btn").html(function() { return $(this).html().replace("Start training for free", "new text"); }); $("header#header a.btn").attr('href','https://google.com'); }); </script>  

I'm seeing it in Chrome, but once I scroll down the page and scroll back up the problem goes away. It seems to be loading some fixed width element that isn't visible above the fold initially, but that goes away on scroll.

It's not straight forward enough of an issue for me to pinpoint myself.

What browser are you using? And do you see this only in edit view or on the live site too?  I've solved a similar problem for myself so I took a look and everything looks good in Safari.

Add to Home > Design > Custom CSS
@media screen and (min-width:768px) { .blog-basic-grid { grid-template-columns: repeat(6,minmax(0,1fr)) !important; } }  

Can you try this in Custom Css
.blog-masonry .masonry-ready .entry.is-loaded { transform: none !important; display: inline-block; position: relative !important; }