Concepción Gil
Concepción Gil

Reputation: 11

Styling prompt-text in Web Stories quiz

Is there any way to change the font-family of the prompt-text in a AMP Web Stories quiz? I tried so many things in CSS and it does work... I could make it with colors and other atributtes, but not this...

Screenshot of the quiz part where I want to change the font to match our style guide

And I took most of the code here.

This is the HTML file. How will you try it just with CSS?

<!-- Slide 3 question-->    
      <amp-story-page id="page3">
        <amp-story-grid-layer template="fill">
          <amp-img style="opacity:0.7"
            layout="fixed" width="1600" height="1200"
            src="AdobeStock_247667133.jpeg"
            alt="..." />

        </amp-story-grid-layer>
        <amp-story-grid-layer template="fill" aspect-ratio="4:6">
          <div animate-in="scale-fade-up">
            <amp-story-interactive-quiz
              class="quiz center h2"
              prompt-text="Is this waterfall real?"
              endpoint="https://amp.dev/documentation/examples/components/amp-story-interactive-poll/results"
              prompt-size="large"
              option-1-text="Yes" option-1-correct option-1-confetti
              option-2-text="No">
            </amp-story-interactive-quiz>
          </div>
        </amp-story-grid-layer>
      </amp-story-page>
        

I tried to add CSS for prompt-text and even other tags...

I wanted to add this font-family

 "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
    <style amp-custom>
      amp-story {
       font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
        }
        
      amp-story-page {
        background-color: #000;
        font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
      }
        
        
      h1, .h1 {
        font-size: 3.3rem;
        letter-spacing: -0.02em;
        color: #fff !important;
      }
        
      h2, .h2 {
        font-size: 2rem;
        color: #fff;
      }
        
        .prompt-text {
        font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
      }
    
    
      p {
        font-weight: 400;
        letter-spacing: -0.35px;
        line-height: 1.6;
        color: white;
        }
        

     .center {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 22em;
      font-size: 0.4em;
    }


     .quiz {
         
        --interactive-prompt-background: linear-gradient(10deg, white, #009EDB);
        --interactive-accent-color: grey;
         
    }
        

     #results-1 {
      --interactive-prompt-text-color: white;
      --interactive-accent-color: linear-gradient(10deg, white, #009EDB);
    } <strong></strong>
  </style>

Upvotes: 1

Views: 35

Answers (0)

Related Questions