Title says it all, this is my code in html:
<div id="outline_box">
<p class="display-2">text</p>
<pstyle="font-family:'Crimson Text', serif;"> more text</p>
</div>
and this is my css:
#outline_box{
width: 75%;
position: fixed;
left: 50%;
margin-left: -37.5%;
padding: 100px;
background-color: rgba(78, 97, 108, 0.55);
border-radius: 20px;
border: 1px solid rgba(78, 93, 102, 0.72);
font-family: 'Mr De Haviland', cursive;
color: white;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
It all seems to be working fine on tablets and pcs but on phone-size screens the text gets out of the box towards the right, and thats totally not right
EDIT CSS media queries:
/*---Media Queries --*/
@media (max-width: 992px) {
.social a {
font-size: 4em;
padding: 2rem;
}
}
@media (max-width: 768px) {
.carousel-caption {
top: 45%;
}
EDIT..again So, i added some more CSS and it did help a bit with the size of the text and brought it a bit closer to what i wanted but still its not centered. Im still working on it ^^
#outline_box{
font-size: 140%;
font-weight: 500%;
padding-bottom: .2rem;
}
In this solution I have taken the basic result of your code but changed the CSS styling substantially to achieve the same thing _
I removed the font attributes from #outline_box and put them into separate classes which can be altered with @media queries as required _
I have also simplified the CSS you were using to position #outline_box to be more in keeping with the Bootstrap library _ You can see the results in the code snippet below _ and if you put this code into your browser and adjust the screen size you will see the styling adjust to fit _
You can adjust the font-sizes in the classes I created to suit your needs
I hope this helps but I would suggest you brush up on how to use Bootstrap to position and resize the elements on your page _ Good Luck : )
CSS
#outline_box {
background-color: rgba(78, 97, 108, 0.55);
border-radius: 20px;
border: 1px solid rgba(78, 93, 102, 0.72);
color: white;
margin: 0 auto;
padding: 15%;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
width: 75%;
}
.largeText {
font-family: 'Mr De Haviland', cursive;
font-size: 6em;
}
.smallText {
font-family:'Crimson Text', serif;
font-size: 1em;
}
@media (max-width: 992px) {
.social a {
font-size: 4em;
padding: 2rem;
}
}
@media (max-width: 768px) {
.largeText { font-size: 3em;}
.carousel-caption {
top: 45%;
}
}
#outline_box {
background-color: rgba(78, 97, 108, 0.55);
border-radius: 20px;
border: 1px solid rgba(78, 93, 102, 0.72);
color: white;
margin: 0 auto;
padding: 15%;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
width: 75%;
}
.largeText {
font-family: 'Mr De Haviland', cursive;
font-size: 6em;
}
.smallText {
font-family:'Crimson Text', serif;
font-size: 1em;
}
@media (max-width: 992px) {
.social a {
font-size: 4em;
padding: 2rem;
}
}
@media (max-width: 768px) {
.largeText { font-size: 3em;}
.carousel-caption {
top: 45%;
}
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div id="outline_box">
<p class="largeText">text</p>
<p class="smallText"> more text</p>
</div>
</body>
</html>
<!-- javascript -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>