I encountered a strange issue while working on a website for a client/design studio. Despite setting the body and html elements to a width of 100%, I noticed that when I resize the browser, a scrollbar appears forcing me to scroll right. Upon scrolling, I discovered a gap on the right side about 150 pixels wide. The body element container seems to set itself to a fixed width of 1240px when the browser is resized, yet the gap remains on the right side.
Below is the CSS code for the body element:
body {
min-width: 1200px;
max-width: 100%;
left: 0px;
right: 0px;
width: auto !important;
margin: 0 auto;
padding: 0;
background: url('images/bg-repeat2.jpg') repeat;
line-height: 1;
font: 'BitstreamVeraSerifRoman', Arial, sans-serif;
}
And here is the CSS for the html element:
html {
margin: 0 auto;
padding: 0;
width: 100%;
min-width: 1200px;
left: 0px;
right: 0px;
}
I have opted not to use the "overflow-x: hidden;" property as it may cause issues with scrolling on smaller screens and mobile devices. It's important to note that this site is intended for desktop viewing only.
If anyone in this community has a solution or fix for this issue, I would greatly appreciate your assistance.
Thank you.