Issue: I am looking to make my paragraph span the entire width of a mobile screen. How can I achieve this? Here is an image depicting the problem I am facing https://ibb.co/VvtRx1H. I specifically want the paragraph enclosed in a red border to be displayed across the entire mobile screen.
CSS code snippet:
*{
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;
}
}
Sample HTML markup:
<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>