Re: Make text smaller footer - email sign up

Make text smaller footer - email sign up

KRISTIAN-KRISTI
Excursionist
15 0 6

My footer consist of "Email Signup" & "Social media icons".
I would like the email sign up heading and text inside the email sign up to be smaller. 

Skærmbillede 2024-09-14 kl. 15.13.52.png

Replies 3 (3)
KRISTIAN-KRISTI
Excursionist
15 0 6

www.kristian-kristian.com
But I have not put this one live yet

KRISTIAN-KRISTI
Excursionist
15 0 6

It didn't do anything 😕

waqaskh12
Tourist
5 1 2

 

To adjust the size of the "Email Signup" heading and the text inside the email signup form in your footer, you'll need to use CSS (Cascading Style Sheets). Here’s how you can do it:

1. Identify the HTML Structure

First, check the HTML structure of your footer to identify the classes or IDs associated with the "Email Signup" heading and the text. The HTML might look something like this:

 

html
Copy code
<footer> <div class="email-signup"> <h2 class="email-signup-heading">Email Signup</h2> <form class="signup-form"> <input type="email" placeholder="Enter your email"> <button type="submit">Subscribe</button> </form> </div> <div class="social-media-icons"> <!-- Social media icons here --> </div> </footer>

 

 

2. Write the CSS

You’ll need to add CSS rules to target the "Email Signup" heading and the form text. You can include this CSS in your website’s stylesheet or directly in the HTML within <style> tags.

Here’s an example of CSS that makes the heading and form text smaller:

 

css
Copy code
/* Adjust the size of the email signup heading */ .email-signup-heading { font-size: 16px; /* Smaller font size for the heading */ } /* Adjust the size of the text inside the email signup form */ .signup-form input[type="email"], .signup-form button { font-size: 14px; /* Smaller font size for input and button text */ }

 

 

3. Apply and Test

  • Apply CSS: Add the CSS to your stylesheet or in the <style> tags within your HTML document.
  • Test Changes: Refresh your website to see the changes. Make sure the heading and form text appear as desired.

Example with Inline CSS

If you prefer to use inline CSS for quick changes, you can do it like this:

 

html
Copy code
<footer> <div class="email-signup"> <h2 style="font-size: 16px;">Email Signup</h2> <form class="signup-form"> <input type="email" placeholder="Enter your email" style="font-size: 14px;"> <button type="submit" style="font-size: 14px;">Subscribe</button> </form> </div> <div class="social-media-icons"> <!-- Social media icons here --> </div> </footer>
 

Adjust the font-size values according to your preference. This approach will make the text in the email signup section smaller and should fit better within your footer.