Edits needed to fix the problem:
Line 55, Css code.
@media (max-width:410px){
.daughter img{
padding:10%;
box-sizing: border-box;
}
.son{
border:1px solid red;
height: 85vh;
width: 100%;
}
.son p{
height: 95%;
text-align: center;
}
}
Apply meta tag in your head section
<meta content="width=device-width, initial-scale=1" name="viewport" />
Replace Style
*{
margin:0; padding:0; box-sizing: border-box;
}
h1{
text-transform: uppercase;
margin:50px 0;
text-align: center;
}
.parent{
width:100%;
height:50vh;
display: flex;
justify-content: space-around;
align-self: center;
}
.daughter{
width:50%;
text-align: center;
padding:0;
}
.daughter img{
width:450px;
}
.son{
width:50%;
padding:0 5%;
box-sizing: border-box;
line-height: 1.7;
text-align: justify;
}
@media screen and (max-width: 768px) {
h1{
color:red;
}
.parent{
display: block;
}
.daughter{
width:100% !important;
}
.son{
width:100%;
}
.parent{display: inline;}
}
@media (max-width:468px){
.daughter img{
padding:10%;
box-sizing: border-box;
}
}
@media (max-width:410px){
.daughter img{
padding:10%;
box-sizing: border-box;
}
.son{
border:1px solid red;
}
}
and html
<h1>My WEBSITE</h1>
<br>
<div class="parent">
<br>
<div class="son">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore minima doloremque aliquid ad voluptates iste dicta officiis repellat nesciunt a.</p>
<br>
</div>
<div class="daughter">
<img src="images/11.jpg" alt="image">
</div>
</div>
Problem: So my problem is pretty straight forward . I want to display my paragraph on the entire mobile screen’s width what should I do
Here have a look on a problem that I am facing https://ibb.co/VvtRx1H.
I just want to display the paragraph that is enclosed in a red border on entire mobile screen
My CSS code:
*{
margin:0; padding:0; box-sizing: border-box;
}
h1{
text-transform: uppercase;
margin:50px 0;
text-align: center;
}
.parent{
width:100%;
height:50vh;
display: flex;
justify-content: space-around;
align-self: center;
}
.daughter{
width:50%;
text-align: center;
padding:0;
}
.daughter img{
width:450px;
}
.son{
width:50%;
padding:0 5%;
box-sizing: border-box;
line-height: 1.7;
text-align: justify;
}
@media (max-width:768px){
h1{
color:red;
}
.parent{
display: block;
}
.daughter{
width:100%;
}
.son{
width:100%;
}
}
@media (max-width:468px){
.daughter img{
padding:10%;
box-sizing: border-box;
}
}
@media (max-width:410px){
.daughter img{
padding:10%;
box-sizing: border-box;
}
.son{
border:1px solid red;
}
}
my HTML code:
<body>
<h1>My WEBSITE</h1>
<br>
<div class="parent">
<br>
<div class="son">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore minima doloremque aliquid ad voluptates iste dicta officiis repellat nesciunt a.</p>
<br>
</div>
<div class="daughter">
<img src="images/11.jpg" alt="image">
</div>
</div>
using your answer I got an output like this
Still not working and do not worry about the meta tag I have included all the essential files correctly. I am facing problem as when the mobile pixel comes near 430px