I am in the process of creating my very first website, which will serve as a portfolio. I have designed three different background images for each section that alternate (home, about, skills, etc.). Utilizing SASS with SCSS syntax, I have encountered an issue where resizing the window to reduce the total width causes the background image not to occupy the full width of the section, but rather stretch to the left side (this occurs below approximately 950px). Despite this setback, I am fond of the pattern I have discovered and would like to retain it. Below is an example of the code snippet from the 'about' section (although all sections are structured similarly), in hopes that someone can assist me in pinpointing my error. Interestingly, the stretching does not occur on the height axis; the website behaves as expected.
#about {
@extend %section;
@extend %background-light;
}
The following are the extensions:
%background-light {
background-image: radial-gradient($background-dot-color2 1px, transparent 1px), radial-gradient($background-dot-color2 1px, transparent 1px);
background-size: 14px 14px;
background-position: 0 0, 7px 7px;
background-color: $background-color2;
}
%section {
padding: 2% 10% 5% 10%;
scroll-margin-top: 8vh;
height: auto;
min-height: 92vh;
width: 100%;
Additionally, these are the general properties assigned in my main style.scss file:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: $font-stack;
}
html {
scroll-behavior: smooth;
cursor: default;
}
(the unusual min-height value was chosen due to a JavaScript function that ensures the header remains fixed during scrolling/section changes via the navbar, thus covering the full viewport height)
Strategies I've attempted:
- Removing other properties and applying only a background color to #about to see if the problem persists;
- Setting a min-width of 100vw to body/section and both; experimenting with setting a height and width of 100% to body/html and both;
- Eliminating the width:100% declaration from %section.