Ok this is driving me crazy. I get the code looking the way I want it using a slider plugin for the background and buttons on top of the slider using ‘Z-index’ and various other pieces of code.
However, when I adjust my screen size, the slider (plugin ‘Smart Slider’) adjust to the size of my screen but my buttons do not on a really small screen they overlap onto the footer.
I want the right coding to getting both my slider (background) and my buttons(links really) I made to work together to adjust to the screen changes.
http://rontoddfoundation-org.stackstaging.com/codebuilder/ < this is them example page I am practising the code on until it is right if anyone can help. I feel like this is something simple that I am missing.
HTML -----------------------------------------------------------------
CSS --------------------------------------
#sliderbkgr {
z-index: -1;
width: 100%;
}
.submenusetting {
display: inline;
position: absolute;
z-index: 2;
align-items: center;
justify-content: center;
margin-top: -500px;
}
.buttonmenu {
z-index: 2;
background-color: #108acb;
border: none;
color: white;
padding-right: 30px;
padding-left:30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px!Important;
margin-left: 10px;
margin-right: 10px;
cursor: pointer;
padding-top: 40px;
padding-bottom: 40px;
min-width: 200px;
max-width: 200px;
line-height: 85%;
letter-spacing: 1px;
transition: 1s;
opacity: 0.8;
border-radius: 5em;
}
.buttonmenu:hover {
background-color: #ffffff;
color: #108acb!Important;
opacity: 0.8;
font-weight: normal!Important;
border-radius: 5em;
}