Browser-Width Banner (Page Heading)

  • Okay, I have what is probably a simple problem to most of you but, being relatively new to the “web environment” (I’m an IT guy), I just can’t figure this one out.

    We’re trying to display browser-width (responsive) banners across our pages showing the title of the page. Let’s say a #1d5b98 background color, 85px wide and having the text (H1) centered on the page.

    Right now, here’s what I have.

    DIV
    <div id=”WideBar”>
    <h1 style=”width: 100%; height: 86px; background-color: #1d5b98; color: #ffffff; text-align: center; valign: middle;”>
    WHAT IS CELLULAR DAS?</h1>
    </div>

    CSS
    /* Draw Browser-Width Title Bar */
    #WideBar{
    position: absolute;
    left: -50%;
    right: -50%;
    width: 200%;
    margin: 0;
    height: auto;
    }

    Just isn’t “centering” the text, is not at all responsive and seems to be “over-ridden” by the theme.

    As I said, probably a simple fix for you guys but a real stumper to me. Any help would be greatly appreciated.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • @dataservices

    possible CSS:

    #WideBar {
    position: relative;
    /* left: -50%; */
    /* right: -50%; */
    /* width: 200%; */
    margin: auto;
    /* height: auto; */
}

    you can consider deleting the commented out bits

    Thread Starter DataServices

    (@dataservices)

    Thanks judgerookie but, when I do that, the banner falls victim to the restraints of the “full-page” formatting of the theme and is not displayed across the entire browser-width.

    @dataservices

    okay, are you able to move the item so it’s within a full bar?

    <div id="WideBar">
<h1>WHAT IS CELLULAR DAS?</h1>
</div>

    which is in here

    <div class="enigma_blog_post_content">
<div id="WideBar">
<h1>WHAT IS CELLULAR DAS?</h1>
</div>
</div>

    to inside this

    <div class="enigma_header_breadcrum_title">
  <div id="WideBar">
<h1>WHAT IS CELLULAR DAS?</h1>
</div>
</div>

    it may be something you need to look into in the template file(s)

    Thread Starter DataServices

    (@dataservices)

    Thanks, but I found a work-a-round that will work for now.

    DIV
    <div id=”WideBar”>
    <h1>What is Cellular DAS?</h1>
    </div>
    <div id=”spacer”></div>

    CSS
    #WideBar{
    position: absolute;
    left: -50%;
    right: -50%;
    width: 200%;
    margin: 0;
    background-color: #31A3DD;
    }

    #WideBar h1 {
    color: #ffffff;
    text-align: center;
    font-size: 33px;
    }

    #spacer {
    clear:both;
    display:block;
    font-size:0;
    line-height:0;
    padding:35px 0 55px 0;
    margin:0;
    }

    @media screen and (max-width: 480px) {
    #WideBar{
    left: -2px;
    right: 0px;
    width: 200%;
    margin: 0;
    }

    #WideBar h1 {
    text-align: left;
    padding: 5px 0 0 10px;
    }

    }

    @media screen and (max-width: 460px) {
    #WideBar{
    left: -2px;
    right: 0px;
    width: 430px;
    margin: 0;
    }

    #WideBar h1 {
    text-align: left;
    padding: 5px 0 0 10px;
    font-size: 30px;
    }

    #spacer {
    clear:both;
    display:block;
    font-size:0;
    line-height:0;
    padding:65px 0 65px 0;
    margin:0;
    }
    }

    @media screen and (max-width: 380px) {
    #WideBar{
    left: -2px;
    right: 0px;
    width: 360px;
    margin: 0;
    }

    #WideBar h1 {
    text-align: left;
    padding: 5px 0 0 10px;
    font-size: 29px;
    }

    #spacer {
    clear:both;
    display:block;
    font-size:0;
    line-height:0;
    padding:70px 0 70px 0;
    margin:0;
    }
    }

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Browser-Width Banner (Page Heading)’ is closed to new replies.