Text size changes when codeblock is used

[v-Z]

Hi there,

For my new site I created a banner with an AI tool, which created html, CSS and javascript.
it shows multiple hero-pictures with a ‘customer question/concern’ in the top left corner. After a few seconds my proposition kicks in bottom-right. (text will be altered)
see banner: Responsieve Slider
You can see the text is perfect readable (to be clear… NO Sitely was touched/used to create that banner )

But when I use that code in a codeblock in my Sitely page….
in Sitely-editor it looks good (although the animation is not showing)

However… when using the preview or publish te site, the text is way too small…
have a look:https://agility.management
(temporarily website location of testing. this is not the final URL)

I made sure that all class names containers etc in the coding were unique. (so no overwrites etc.)

What is happening here. I used site-inspectors etc. But really cannot find it…

Thanks for your help.

p.s. site is not ready. yet, so you’ll see that layout is not finished, no different viewports yet and no multi language. All coming up. (simple tasks with this great peace of software.)

Robert

[Allan]

Hello @v-Z

The text on the page you shared displays correctly for me:

However, this is not the case on your homepage.

Did you know that you could achieve a somewhat similar result using popups?

[v-Z]

Hi @Allan

Thanks for your reply. That’s exactly my issue. The pure (externally generated) code works like a charm. (Responsieve Slider is NOT using any Sitely… just basic code

However, when I incorporate the code in a codeblock (Sitely), it shows alright in the editor (sitely), but fails when exporting (or in the preview)
Https://agility.management
Seems like Sitely is messing the code……

I thought about blocks, but that will be quite some objects (6 sliding pictures and timed “questions” and “propositions” which needs to disappear
(And to be honnest: it was great fun to see the code being generated by AI, just by explaining what I want in plain English)

In my 10(!) year old site (https://agilitymanagement.nl), I used Tumult Hype for the banner in a frame. Now Inwant it to be page-width, to match the nummorous videos

Thanks again for your thoughts

Kindest regards

Robert

[FlaminFig]

I know it won’t be exactly the same but you can achieve most of what I see there with Sitely’s Image Gallery. Overall it would be far better in when you introduce your Devices…

[Allan]

I understand, AI is magical! But just so you know, it’s actually quite simple to achieve something similar (even if not exactly the same) using popups. You would just need 6 popups and a countdown timer in each one to enable automatic scrolling.

If you still prefer to continue with custom code, you can add this small piece of CSS inside a tag, which should fix your issue:

.customer-question,
.proposition {
  font-size: 2.5rem !important;
}

[v-Z]

**** UPDATED IN NEXT COMMENT****

Thanks @Allan, you’re indeed very close!
(I was playing with that already)

however… no joy, yet… (I see something now, use to this setting)

I made font-size: 4rem; to really see the effect.

but then… if I use the ‘inspector’ of the browser, I saw the text inherit the 15px from ‘wrapper’ (and both the 2.5rem, 4rem or 40px are of the .customer-question_Banner are ignored.

So… my thought is that the ‘wrapper’, which Sitely adda for the codeblock is introducing a font size 15px.… not sure if that is ‘by design’, a bug or a setting I haven’t found. Maybe @duncan recognises this behaviour?

With your help, we found the smoking gun… now I just need to find a way to get that bullet ‘15px font-size’ out of the wrapper.

Thanks again for your thoughts

Robert

[v-Z]

I’m so dumb…

I thought that !important was a ‘remark statement’ made by you to make something clear. but it actually is meaning something… like ignoring the wrapper setting.

I should have listen more carefully to you @Allan!
you was always ahead of me an nailed it already!

You saved my day. Many thanks!

(and I learned something about CSS)

kindest regards

Robert

[v-Z]

Thanks for your comment. @FlaminFig

The banner will not be shown on smaller devices. So… that problem solves itself

thanks for your thoughts, though

[duncan]

When using code, you need to know what you’re doing, and provide a self-consistent css environment. It’s not super complicated but a lot more detail oriented than Sitely users are normally used to deal with, so our answer is generally to use Sitely native features and not manually code things. What Sitely produces as code is all carefully thought out, it’s all looking correct.