I am trying to align my "cards" vertically when viewed from a mobile phone however I cannot seem to get the syntax right. I tried to 'text-align: center;' float:none' among other tries but I can't seem to figure it out. Any help will be appreciated. thank you.
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) {
.card {
display: block;
float: none;
width: 100%;
text-align: center;
}
}<div class="card">
<img src="img/websume.png" height="240" width="356" alt="Card image cap">
<p class="card-text">My "Web-sume" was my first site to include Bootstrap 4. The site is a responsive site, with a feature only available to moblie devises. The site consist of mostly Bootstrap custom layouts.</p>
</div>
<div class="card">
<img src="img/websume_drpdwn.png" height="240" width="356" alt="Card image cap">
<p class="card-text">The "Web-sume" has several fixed images as well as a drop down section which includes my address as well as social links. I used the -web kit layouts for the 'Experience' section of the site.</p>
</div>
<div class="card">
<img src="img/websume_exp.png" height="240" width="356" alt="Card image cap">
<p class="card-text">As mentioned before, the site, when viewed through a mobile devise has a feature where if a client wants to get in contact with me they do not have to scroll all the way to the bottom of the page to get my contact information, a 'email' and 'phone' button appears for easy access.</p>
</div>Just a simple oversight - it's the CSS comment breaking your @media query. You used // Extra small devices (portrait phones, less than 576px) initially, and in CSS, the comment syntax is /* Extra small devices (portrait phones, less than 576px) */