Currently, I am working on a web page located at this link:
My main focus at the moment is positioning an image in such a way that it appears to be coming out of the right side of the screen. Progress so far is looking promising.
However, I have noticed that when I connect a mouse to my Mac using Safari, a vertical scrollbar appears on the screen. This causes a portion of the image (the width of the scrollbar) to extend beyond the edge of the screen, resulting in a horizontal scrollbar being displayed as well.
The HTML/CSS related to the image and its container are shown below:
<div class="col-md-6 image-col">
<div class="image-container">
<img class="contact-graphic" src="/assets/contact-us-graphic.png" />
</div>
</div>
.image-container {
height:70vh;
}
img.contact-graphic {
height:100%;
border-radius:5px;
}
.image-col {
padding-right:0 !important;
padding-left:0;
margin-right:0 !important;
overflow-x:hidden !important;
width:50vw !important;
margin-right:-50vw!important;
display:inline-block;
}
I have a feeling that there may be room for improvement in this CSS code. Any suggestions or feedback would be greatly appreciated.
Thank you!