Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • September 24, 2015 at 9:04 am #508209
    fjhughes

    Hello,

    I need to layout my page like this design: http://screencast.com/t/4352BA7ON

    This is how it is on the site currently: http://screencast.com/t/1SpbydZGEAh

    I need to get that divider line down the middle. Currently, on the site, the ABOUT US title is in a Text Block in a 3/5 container with a 1/5 on each side. The text below is in two 1/2 containers. Even if I squeezed in a 1/5 for the divider, it would create too much space.

    Any thoughts?

    Site url : http://tsgaz.net/amendola/#av_section_1

    Thanks for any advice you can give.

    -Fred

    September 24, 2015 at 3:29 pm #508528
    Elliott

    Hey Fred!

    Try adding a codeblock element to one of those columns and add this inside.

    <div style = "position: absolute; top: 0px; left: 50%; width: 1px; height: 200px; background: black;"></div>

    Regards,
    Elliott

    October 1, 2015 at 8:35 pm #512428
    fjhughes

    This worked great! I have one more question about it. When you condense your screen to mobile size, the line overlaps the text content. Is there a way I could add something to the Quick-CSS and assign an ID to the div so that the line does not show on mobile?

    Thanks!

    October 2, 2015 at 7:54 am #512594
    Rikard

    Hi,

    Try adding an ID to the div: 

    <div id="hide-for-mobile" style="position: absolute; top: 0px; left: 50%; width: 1px; height: 200px; background: black;"></div>

    You can then add a style block above it or in Quick CSS:

    @media only screen and (max-width: 767px) {
#hide-for-mobile {
display:none !important;
}
}

    Wrap the code in <style></style> tags if you add it to the code block itself.

    Best regards,
    Rikard

    • This reply was modified 9 years, 1 month ago by Rikard.
    October 13, 2015 at 4:21 am #517816
    fjhughes

    You guys are awesome. That works great! Thanks!

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Layout design help – borders’ is closed to new replies.