I'm struggling with adjusting the responsiveness of my icons around the main wheel to changes in page size. Currently, they are not staying put relative to the middle wheel when the page size increases or decreases. I also need the wheel and icons to resize better when the page shrinks or grows. I suspect it has something to do with the positioning, but I've been stuck on this issue for hours. Any assistance would be greatly appreciated!
You can view my website at www.marshalllanning.com. Below is a snippet of my CSS code...
.bg {
/* Rules for filling background */
min-height: 100%;
min-width: 1024px;
/* Proportionate scaling */
width: 100%;
height: auto;
/* Positioning */
position: fixed;
top: 0;
left: 0;
z-index: 0;
}
.navbar-custom {
background-color: black;
z-index: 3;
}
.navbar-brand
{
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin: 0;
}
.navbar-toggle {
z-index: 3;
}
.navbar-custom .navbar-toggle .icon-bar {
background-color: red;
}
.navbar-custom .navbar-toggle {
background-color: white;
}
@media screen and (max-width: 1024px) { /* Specific to
this image */
.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
.img1 {
border-radius: 50%;
display: block;
margin-left: auto;
margin-right: auto;
width: 500px;
height: 500px;
border-color: white;
border-width: 15px;
border-style: solid;
position: absolute;
margin: 0;
top: 52%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.fb {
border-radius: 20%;
display: block;
margin-left: auto;
margin-right: auto;
width: 64px;
height: 64px;
position: absolute;
margin: 0;
top: 30%;
left: 34%;
margin-right: -50%;
transform: translate(-50%, -50%);
z-index: 2;
border-color: black;
border-width: 1px;
border-style: solid;
}
... (Remaining CSS code)