Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Why is it acting as if there is a max-width!?

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #188660
    cscodismith
    Participant

    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.

    #188663
    Alen
    Participant

    Can you elaborate little bit, I’m not fully understanding the question?

    #188672
    shaneisme
    Participant

    @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 :)

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.