- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
There is no max-width in my CSS code but it is displaying as if there is!? I have no idea why it is doing that. Before you ask, have you checked the fullpage style-sheet as you can see in the head tag below, yes I have and the only max-width element is on any ‘ ul li ‘ elements which is something that I do not have.
head.php:
<!-- This following line includes my stylesheets * Not Fullpage's * -->
<link href="includes/styles/index.css" rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="fullpage/jquery.fullpage.css" />
HTML:
<div class="text2">
<p class="pa1">CONTACT ME FOR INFORMATION ABOUT DESIGNING YOUR SITE, AND FOLLOW ME ON SOCIAL MEDIA.</p>
</div>
CSS:
.pa1 {
position: absolute;
z-index: 100;
color: white;
text-align: center;
font-size: 28px;
font-family: 'Lato', sans-serif;
left: 50%;
top: 25%;
transform: translate(-50%, -50%);
}
You can find a codepen of this project here.
Can you elaborate little bit, I’m not fully understanding the question?
@Atelierbram has a better (possibly) solution, however to answer your question that involves how the browser is rendering your transform
.
Go into devtools and uncheck the transform
property of .pa1
and you’ll see it crammed up against the left. The browser is taking some liberties with how wide it is because it’s out of the flow and has no width by you declared. If you declared a width, the browser would stop guessing :)