I've scoured the depths of the internet but have come up empty-handed. On desktop and tablet views, my styling looks perfect. However, when it comes to mobile view, most elements are not styled correctly. I have double-checked that I added
<meta name="viewport" content="width=device-width, initial-scale=1">In Firefox Dev tools, I was able to make the desired changes, yet when I input the same values (within and outside a media query) they seem to have no effect. Upon saving and refreshing the page, the incorrect styling resurfaces.
If anyone has any suggestions on what I could do differently or add to my code to resolve this issue, I would greatly appreciate it. Thank you in advance.
UPDATE: Below is a snippet of my HTML along with the corresponding CSS.
h2 i {
color: #fafafa;
}
.profile-text {
padding: 100px;
}
.profile-text p {
font-size: 18px;
}
.about {
padding-top: 10px;
}
img {
vertical-align: middle;
border-style: none;
width: 100%;
}
.photo {
height: 50%;
overflow: hidden;
}
.contact-info {
background-color: #c158dc;
text-align: center;
color: #fafafa;
}
.contact-info .value {
padding-left: 20px;
}
.value {
margin-bottom: 10px;
font-size: 18px;
}<div class="row no-gutters">
<div class="col-md-4 contact-info">
<div class="photo">
<img src="assets/images/bratislava-sm.JPG" alt="profile image">
</div>
<div class="upper value">
<p>Amy H</p>
</div>
<div class="value">
<p><i class="fas fa-map-marker-alt"></i> text here</p>
</div>
<div class="value">
<p><i class="fas fa-phone-alt"></i> text here</p>
</div>
<div class="value">
<p><i class="fas fa-envelope-open-text"></i> test here</p>
</div>
</div>