Hey, Eric, Inger, Wayan and Frank,

This may be a little long.

I have a website for a restaurant that has a line of text in an html element with a script that changes the amount of years they have been in business every year on their anniversary.

I'm in the process of rebuilding the site and the client wants the text in a certain color and certain size.

I tried using css files for each breakpoint but the first breakpoint just won't show (phone), every other breakpoint works fine. It's like the small breakpoint doesn't exist.

I'm going to attach my css file and maybe someone can see if I have something incorrect in the first breakpoint.

The break points are labeled from smallest to largest as .html-element.html-elemen-bp1 to .html-element.html-elemen-bp5.

I would like to use the script so I don't have to update the year, every year.

Thanks for any help,
Ernie

I think you forgot to attach that CSS file.

Inger,
Yes I did.

You need to send the HTMLCode layout too
personally, I can't see why you have labelled the breakpoints between 1 -5 surely the code should be the same for the class name at each breakpoint

IE
.html-element.html-element-bp1

the breakpoints then obey the visibility you have set according to the width and apply it to the element

Are you using Site Designer? If so use an element within SD and add the script to the elements Content code area. This way you can set the styling with the element.

I believe that Site Designer is being used. If so, a possible simple solution would be as follows.

1. Remove the CSS mentioned and the present script for the date.
2. Give the text element a class "anniv" and style it however wanted.
3. Put the following script in the footer changing
(a) the date in the 'var s' line to the anniversary date (NB Jan is 0, Dec is 11);
(b) the text as wanted in the 'a.innerHTML' line.



Others, of course, may have easier and better solutions or shorter JavaScript, perhaps just 1 or 2 lines.

If multiple pages are to have that text element, I would create in Resources a file called years.js and
(i) put the coding in it without the <script></script> tags
(ii) in the Page Manager > Custom Code Settings > Head box tick 'Use global' and click on 'Add a local CSS or Javascript' to choose the years.js file.

Frank

Ernie
here is some CSS that should help with your problem

<style>
.words{
font-size: 16px;
color: #345c3a;
font-weight: 600;
text-align: center;
}
@media screen and (min-width: 40rem) {
.words {
font-size: 17px!important;
}
}
@media screen and (min-width: 52rem) {
.words {
font-size: 20px!important;
}
}

@media screen and (min-width: 64rem) {
.words {
font-size: 22px!important;
}
}

</style>

You can place it in the header section of the HTML element.
Note,
I have given a new class name to the HTML element also (replace the existing ones)
you can add as many keyframes as you with, (keyframes can be different to your existing breakpoints, no need to add extra breakpoints)
HOWEVER, the keyframes HAVE to be in ASCENDING order (lowest to highest).

Franks solution looks ok too and can be styled within SD direct, (but of course needs breakpoints rather than doing it with custom CSS

If you use Franks solution, then you can adjust the text size/colour alignment in the "typography" section of the "Design" tab for the CONTAINER "anniv" (all except for the font type, that would have to be declared with some custom css

Thanks to everyone.
Eric,
I was in the SD Forum and then came in here to post the question and just forgot to add: SD, using a container div with an HTML element in the container. That would have made my question a lot clearer. If I remember correctly you helped me with the script to do the yearly number of years change. Thanks again.
Frank,
Thank you for your solution as well. It's only on one page thanks for including a multi-page solution as well.
Wayan,
Thank you for your solution and input.

I'll figure out which works the best for this project and let you know what I went with.

Ernie

I think the solution provided by Frank really is the easiest. In the script, at the bottom where it says
"In business for " + n + " years.";
you change the sentence to say what the site owner wants, and then on the actual page you create an empty div container with the class name '.anniv' where you want it to appear. The class can be styled, like Wayan says, whichever way you like.