Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2018
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Something wrong with my CSS code

    So I'm creating a WordPress theme, and it's pretty basic, I just want one static page that says "coming soon" in the very center of the page, and has a border around that text.

    Aside from all of the other necessary code that I need, I just have "coming soon" inside of a h1 tag which is inside of a div tag with the class "cm-box".

    Essentially while I try to use padding, borders, and margins, the padding, and the margin are only applying to the top and the bottom, and the border around my text is stretching out to the edge of the page, rather than wrapping itself around my text.

    Iíll copy and paste the code from my stylesheet below, Iím struggling to figure out what it is that I need to change in order to fix this problem; If someone could take a look at it and spot the problem that would be a great help. thanks.

    Code:
    Code:
    * {
    margin: 0;
    padding: 0;
    }
    
    body {
    background-color: #B20000;
    margin: 0;
    
    color: #ffb094;
    font-family: Arial, sans-serif;
    }
    
    .cm-box {
    border: 5px #ff6d38 solid;
    padding: 10px;
    margin: 50% auto;
    }
    
    .cm-box h1 {
    text-transform: uppercase;
    font-size: 8vw;
    text-align: center;
    }
    Last edited by vinyl-junkie; Dec 19th, 2018 at 02:50 AM. Reason: added code tags

  2. #2
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    11,215
    Thanks
    6
    Thanked 1,347 Times in 1,316 Posts
    h1, as well as div, are block-level elements, and these are naturally stretching across the entire width of their container. Therefore, any auto left and right margins won’t have any effect and any borders will stretch as wide as the element is unless you specify a specific width or apply styles that influence the display of the element (for example, tables are naturally collapsing in width, so display: table on the div will give you the desired effect without specifying a width). Since you are using vw as font size unit you could as well specify a width in vw. And I’d also suggest using vw (and/or vh) for the padding.

  3. #3
    New to the CF scene
    Join Date
    Oct 2018
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've only been at this for a couple months and this is my first post but I think I can help you with this if you haven't already figured it out.

    1. I moved the border from class "cm-box" to class "cm-box h1" since it's the h1 element that you want the border around and not the div.
    2. Changed the h1 width to 900px which seemed to work.
    3. Added "margin: auto" to h1 to center it within the div that it's nested in

    Visually I think it's what you wanted just not sure if it's he best way to accomplish it


    Code:
    * {
    margin: 0;
    padding: 0;
    }
    
    body {
    background-color: #B20000;
    margin: 0;
    
    color: #ffb094;
    font-family: Arial, sans-serif;
    }
    
    .cm-box {
    padding: 10px;
    margin: 50% auto;
    }
    
    .cm-box h1 {
    border: 5px #ff6d38 solid;
    text-transform: uppercase;
    font-size: 8vw;
    text-align: center;
    width: 900px;
    margin: auto;

  4. #4
    Banned
    Join Date
    Jan 2019
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think So you look for this change

    <!DOCTYPE html>
    <html>
    <head>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <style type="text/css">
    * {
    margin: 0;
    padding: 0;
    }

    body {
    background-color: #B20000;
    margin: 0;
    color: #ffb094;
    font-family: Arial, sans-serif;
    }

    .cm-box {
    border: 5px #ff6d38 solid;
    padding: 10px;
    margin: 15% auto;
    }

    .cm-box h1 {
    text-transform: uppercase;
    font-size: 8vw;
    text-align: center;
    }
    </style>
    </head>
    <body>
    <div class="cm-box">
    <h1>Coming Soon</h1>
    </div>
    </body>
    </html>
    Last edited by vinyl-junkie; Jan 5th, 2019 at 07:06 AM. Reason: self-promotional link removed


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •