I'm encountering a strange issue. I successfully managed to decrease the font size of the placeholder text for my desktop design, but it's not working for my mobile phone media query. I started with the desktop version and used a max width of 480 pixels or less with the following code:
div.practice_diary input::placeholder {
color: #6A5ACD ;
opacity: 1;
position:relative;
left: 6em;
font-size: .1em;
}<div class="practice_diary">
<form class="signup-form" action="practice_diary_form.php" method="POST">
<label>User ID</label>
<br></br>
<input text="text" name="user_uid" placeholder="User ID">
<br></br>
<label>Student's First Name</label>
<br></br>
<input text="text" name="first_name" placeholder="Student's First Name">
<br></br>
<label>Student's Last Name</label>
<br></br>
<input text="text" name="last_name" placeholder="Student's Last Name">
<br></br>
<label>Lesson Title</label>
<br></br>
<input text="text" name="lesson_title" placeholder="Lesson Title">
<br></br>
<label>Describe Lesson: For example: Did you practice counting? fingering?</label>
<br></br>
<textarea name="describe_lesson" placeholder="Describe Lesson"></textarea>
<br></br>
<div class="practice_diary_last_two_questions">
<label>Hours of practice</label>
<br></br>
<input text="text" name="hours_practice" placeholder="Hours of Practice">
<br></br>
<label>Date of Practice</label>
<br></br>
<input text="text" placeholder="<?php echo htmlspecialchars($date); ?>">
<br></br>
</div>
<button type="submit" name="submit">Enter Diary</button>
</form>
</div>However, when viewing from my mobile phone, nothing changes even though it works fine for the desktop version...