Skip to main content
kineticcreative123
Inspiring
October 16, 2017
Answered

Need help fast. Can't align two responsive elements.

  • October 16, 2017
  • 2 replies
  • 734 views

Good morning,

I'm having issues with a responsive template and can't get my horizontal line or the button to behave like the copy. Would like both to be flush with text on left side of page. I've tried everything I can think of.

Here is the live version I'm working on.

dc advocacy - premier inc.

    This topic has been closed for replies.
    Correct answer osgood_

    Create your own custom css style sheet and link it to the page AFTER the link to 6389_main.min.css file

    Add the below css selectors to it:

    .hero .buttons {

    width: 90%;

    margin: 0 auto;

    max-width: 1000px;

    }

    .headline hr {

    border-top: 5px solid #ffb819;

    width: 30%;

    float: left;

    }

    .headline h1 {

    clear: both;

    }

    Then move the <hr> tag from its current position in the code:

    <div class="vertical_center">

                  <div>

                 <hr>

                       </div>

    To directly AFTER the opening 'headline' div tag:

    <div class="headline">

                  <hr>

    2 replies

    Nancy OShea
    Community Expert
    Community Expert
    October 16, 2017

    Adjust Button margins as required.  Currently, it's centered in the parent container.

    .hero .buttons {

        width: 90%;

        margin: 0 auto;

        max-width: 700px;

    }

    Nancy O'Shea— Product User & Community Expert
    kineticcreative123
    Inspiring
    October 16, 2017

    Thank you Nancy!!

    osgood_Correct answer
    Legend
    October 16, 2017

    Create your own custom css style sheet and link it to the page AFTER the link to 6389_main.min.css file

    Add the below css selectors to it:

    .hero .buttons {

    width: 90%;

    margin: 0 auto;

    max-width: 1000px;

    }

    .headline hr {

    border-top: 5px solid #ffb819;

    width: 30%;

    float: left;

    }

    .headline h1 {

    clear: both;

    }

    Then move the <hr> tag from its current position in the code:

    <div class="vertical_center">

                  <div>

                 <hr>

                       </div>

    To directly AFTER the opening 'headline' div tag:

    <div class="headline">

                  <hr>

    kineticcreative123
    Inspiring
    October 16, 2017

    Thanks so much for your help and your quick response!