Modify font-size of text in TitleComponent

Natblow · May 23, 2024 · 717987c · 717987c
1 parent fec6928
commit 717987c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 17 deletions.
diff --git a/app/assets/stylesheets/pages/case_contacts_form.scss b/app/assets/stylesheets/pages/case_contacts_form.scss
@@ -15,21 +15,17 @@
 
   &-checkbox {
     border-color: #757575;
-}
-
-  &.desktop-title {
-    display: none;
-
-    @media only screen and (min-width: screen-sizes.$mobile) {
-      display: block;
-    }
   }
 
-  &.mobile-title {
-    display: block;
+  &-title {
+    @media only screen and (max-width: screen-sizes.$mobile) {
+      font-size: 28px;
+    } 
+  }
 
-    @media only screen and (min-width: screen-sizes.$mobile) {
-      display: none;
-    }
+  &-subtitle {
+    @media only screen and (max-width: screen-sizes.$mobile) {
+      font-size: 24px;
+    } 
   }
 }
diff --git a/app/components/form/title_component.html.erb b/app/components/form/title_component.html.erb
@@ -1,16 +1,14 @@
 <div class="title-wrapper pt-30">
   <div class="title mb-30">
     <div class="align-items-baseline d-md-flex gap-3">
-      <h1 class="case-contacts-form desktop-title"><%= @title %></h1>
-      <h2 class="case-contacts-form mobile-title"><%= @title %></h2>
+      <h1 class="case-contacts-form-title"><%= @title %></h1>
       <% if @autosave %>
         <small data-autosave-target="alert"></small>
       <% end %>
     </div>
 
     <div class="row align-items-center mt-5">
-      <h2 class="col-12 col-md-6 case-contacts-form desktop-title"><%= @subtitle %></h2>
-      <h3 class="col-12 col-md-6 case-contacts-form mobile-title"><%= @subtitle %></h3>
+      <h2 class="col-12 col-md-6 case-contacts-form-subtitle"><%= @subtitle %></h2>
       <% if @progress %>
         <div class="col-12 col-md-6 align-items-center d-flex gap-2 mt-2 mt-md-0">
           <p class="col-auto">