Hi! I am building an Astra themed website using Spectra on Word Press and having difficulty adjusting the size of a container that holds an image. I have spent hours working my own solutions as well as using AI help with no results.
Specifically, I want to adjust the height of a hero container that holds a hero image so that it fits the size of the image. Here is a link to the website and the CSS i am currently working with:
/* Remove spacing from outer container */
.hero-gradient-container {
height: 500px;
width: 100%;
max-width: 100%;
padding: 0 !important;
margin: 0 !important;
position: relative;
display: block;
}
.hero-image {
margin-top: 0;
margin-bottom: 0;
display: block; /* remove default inline gap */
padding-top: 0px;
}
.hero-text {
position: absolute;
top: 35%; /* move up /
left: 10%; / move left /
transform: translateY(-50%); / vertical centering only /
z-index: 10;
display: flex;
flex-direction: column;
align-items: flex-start; / stack left-aligned */
text-align: left;
color: white;
}
.hero-text > * {
margin-bottom: 1rem;
}
.hero-text > *:last-child {
margin-bottom: 0;
}