Margin/padding below hero image

Hi @jimithing007,

You’ll want to use breakpoints to define in between which resolutions you want to adjust the CSS for the element.

Take a look at the following article, which should help explain things a bit better: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

The media queries are defined by you, so depending on what screen sizes you want to target your breakpoints may differ than those in the article.

Thanks Evan. That article was very helpful.

Using the below (sorry that my coding is a bit amateur) seemed to work, at least from what I was able to check on my laptop.

@media only screen and (min-width: 1423px) {
#luminaires div {margin-top: -50px
}
@media only screen and (min-width: 1440px) {
#luminaires div {margin-top: -50px
}
}
@media only screen and (min-width: 1600px) {
#luminaires div {margin-top: -30px
}
}
@media only screen and (min-width: 1680px) {
#luminaires div {margin-top: -30px
}
}
@media only screen and (min-width: 1829px) {
#luminaires div {margin-top: -10px
}
}
@media only screen and (min-width: 1920px) {
#luminaires div {margin-top: -10px
}
}
@media only screen and (min-width: 2134px) {
#luminaires div {margin-top: 10px
}
}
@media only screen and (min-width: 2560px) {
#luminaires div {margin-top: 10px
}
}
}

In a similar vein, is there a way to change how the hero image scales by screen resolution? With higher resolutions, the hero gets narrower and the text gets covered. Is there a way to keep it’s current scale (if you’re viewing at 1600×900)? If you want me to start a new topic for this I can.

You’ll want to add the appropriate CSS declaration in the media query where you want to tweak the image size. You just have to add the declaration in the appropriate block in the code you have referenced above.

Evan

I’ve researched but I can’t seem to find the right command that identifies the hero image – either that, or I can’t get the code right to make it work. I’ve tried a few different things but nothing seems to work. I started with this:
@media only screen and (min-width: 3200px) .hero div {height: 200px; }