How to add a button over an image element

Support
#1

I tried using the advice of a couple of different threads before I got stuck. Basically, I want my button at the center and at the bottom of this image, but I still want it to be on top of it. Here is what It looks like.

And here is what I want it to look like.

Here is the link to my website

#2

Also, if you check the image in section 1, just below my navigation bar/menu, there is a tiny little gap where you can see a white line. I was trying to get rid of that by adjusting the margins in the section layout and the row layout, not sure how to get rid of that. Thanks

#3

Hello Brian,

Thanks for writing in!

To remove the tiny gap or white line in your navbar, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-navbar {
    box-shadow: none;
    border: none;
}

And to have your button fixed on top of you image, please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

.my-fix-button {
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -136px;
}

Hope this helps.

#4

Thank You, this did in fact help. Now I’m only left with one more problem. On mobile display, the text is running outside of the box. Here is what I am talking about…

not entirely sure how to fix that. thank you

#5

Hello Brian,

Thanks for updating in!

To resolve this last issue, you will need to edit the page back in Cornerstone. Find the text element and then find the “Customize” tab. You will need to insert this element css:

@media(max-width: 979px){
  $el {
    margin: 20px;
    max-width: 100%;
  }
}

Hope this helps. Kindly let us know.

#6

I tried it, unfortunately it did not work… :frowning:

#7

Hi There,

Please also add this element CSS after the previous CSS:

@media (max-width: 480px){
    $el {
        margin-left: -128px;
    }
    $el  .x-anchor-content {
        padding: 8px 10px;
    }
}

Hope it helps :slight_smile:

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.