HTML - Text/Button Alignment (CSS Media) [duplicate] - html

Question

This question already exists:
HTML desktop and mobile [closed]
Closed 3 years ago.
https://jsfiddle.net/5d401nso/1/
#mobileview{
/*background-image:url("");
background-size:100% 100%;*/
width:auto;
height:auto;
}
#media(max-width: 768px){
#mobileview{
width:411px;
height:411px;
}
}
#media(max-width: 500px){
#mobileview{
width:411px;
height:411px;
}
}
Above is the jsfiddle that i have created.
Current Problem: Not Supporting Mobile View and looking a ways to
change the text and button alignment from center to "left" when in
mobile view
Solution That i wanted: When in mobile view ( max width 768px or 500px ), the text and button will align to left side instead of center.

Answer 1

Put p { text-align: left } inside your #media {} at whatever breakpoint you want it to happen. However small tipp. To make it even more responsive give your image a max-width instead of a static width, so your image will resize whenever your screen does. Also note you have the exact settings for 500 and 700px. If you say #media(max-width: 700px) it will apply to every thing wich is smaller than 700px. You don't need to define 500px if your want 500px down. If you want something to happen within 500px and 700px us (min-width: 500px) and (max-width: 700px)
#media(max-width: 500px){
#mobileview{
max-width: 100%;
height: auto;
}
p {
text-align: left;
}
}