Dawn Theme - Image banner issue

[ARTLOUNGE]

Hi,

I am using dawn theme and have the below image banner, I have also added the below custom css as it wasn’t appearing correctly on the mobile version or desktop, however, now the content text and button don’t show correctly. How can I fix this?

.banner {
position: relative;
overflow: hidden;
width: 100%;
aspect-ratio: 16/9;
}

.banner__media {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}

.banner__content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
z-index: 2;
}

https://www.the-artlounge.com/ - password nagco

[Supporter]

Open the css and replace it with this

.banner {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.banner__content {
  position: relative; /* Changed from absolute */
  text-align: center;
  color: white;
  z-index: 2;
  padding: 20px;
  max-width: 90%; /* Prevent content from touching edges */
}

/* Add contrast for better text visibility */
.banner__content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3); /* Optional overlay for better text visibility */
  z-index: -1;
}

/* Media query for mobile devices */
@media screen and (max-width: 749px) {
  .banner {
    aspect-ratio: 1/1; /* Optional: different aspect ratio for mobile */
  }
  
  .banner__content {
    padding: 15px;
    max-width: 95%;
  }
}

and tell if it works for you

[ARTLOUNGE]

@Supporter - thanks for the response, however, I get the below error -

Your custom CSS has reached the size limit of 500 characters. Remove some CSS to save your changes.

[Supporter]

Please try this i have updated the code for better results

.banner {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 3/1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.banner__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.banner__content {
  position: relative;
  text-align: center;
  color: white;
  z-index: 2;
  padding: 40px 20px;
  max-width: 1200px;
  width: 100%;
}

.banner__heading {
  margin-bottom: 1.5rem;
  font-size: 2.8rem;
  line-height: 1.2;
  font-weight: 600;
}

.banner__text {
  margin-bottom: 2rem;
  font-size: 1.6rem;
  line-height: 1.5;
}

.banner .button {
  min-width: 160px;
  padding: 15px 30px;
  font-size: 1.4rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

/* Optional overlay for better text visibility */
.banner__content-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

/* Tablet styles */
@media screen and (max-width: 990px) {
  .banner {
    aspect-ratio: 2/1;
  }

  .banner__heading {
    font-size: 2.4rem;
  }

  .banner__text {
    font-size: 1.4rem;
  }
}

/* Mobile styles */
@media screen and (max-width: 749px) {
  .banner {
    aspect-ratio: 3/2;
  }

  .banner__content {
    padding: 20px 15px;
    width: 90%;
  }

  .banner__heading {
    font-size: 2rem;
    margin-bottom: 1rem;
  }

  .banner__text {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
  }

  .banner .button {
    min-width: 140px;
    padding: 12px 24px;
    font-size: 1.2rem;
  }
}

/* Optional: Add animation for content */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.banner__content > * {
  animation: fadeInUp 0.8s ease-out forwards;
}

[Supporter]

No add this in theme if you don’t know about that you can add me i can do it for you.

[Supporter]

add it theme code editor

[ARTLOUNGE]

@Supporter - am I adding this into the section-image-banner.css? if so, I tried that by replacing what is in there with what you gave me and it doesnt appear to work correctly

I replaced the below in section-image-banner.css, I also removed the custom css from section on the page as well but it didnt fit the whole page as it currently does and the container was visible even though the container wasn’t selected to show on the page. It also removed the overlay.

How can I give you access to have a look at this? Thanks for your help.

.banner {
display: flex;
position: relative;
flex-direction: column;
z-index: auto;
isolation: isolate;
}

.banner__box {
text-align: center;
}

/* Needed for gradient continuity with or without animation, the transform scopes the gradient to its container which happens already when animation are turned on */
.banner__box.gradient {
transform: perspective(0);
}

@media only screen and (max-width: 749px) {
.banner–content-align-mobile-right .banner__box {
text-align: right;
}

.banner–content-align-mobile-left .banner__box {
text-align: left;
}
}

@media only screen and (min-width: 750px) {
.banner–content-align-right .banner__box {
text-align: right;
}

.banner–content-align-left .banner__box {
text-align: left;
}

.banner–content-align-left.banner–desktop-transparent .banner__box,
.banner–content-align-right.banner–desktop-transparent .banner__box,
.banner–medium.banner–desktop-transparent .banner__box {
max-width: 68rem;
}
}

.banner__media.animate–zoom-in {
clip-path: inset(0px);
}

.banner__media.animate–zoom-in > img:not(.zoom):not(.deferred-media__poster-button),
.banner__media.animate–zoom-in > svg:not(.zoom):not(.deferred-media__poster-button) {
position: fixed;
height: 100vh;
}

@media screen and (max-width: 749px) {
.banner–small.banner–mobile-bottom:not(.banner–adapt) .banner__media,
.banner–small.banner–stacked:not(.banner–mobile-bottom):not(.banner–adapt) > .banner__media {
height: 28rem;
}

.banner–medium.banner–mobile-bottom:not(.banner–adapt) .banner__media,
.banner–medium.banner–stacked:not(.banner–mobile-bottom):not(.banner–adapt) > .banner__media {
height: 34rem;
}

.banner–large.banner–mobile-bottom:not(.banner–adapt) .banner__media,
.banner–large.banner–stacked:not(.banner–mobile-bottom):not(.banner–adapt) > .banner__media {
height: 39rem;
}

.banner–small:not(.banner–mobile-bottom):not(.banner–adapt) .banner__content {
min-height: 28rem;
}

.banner–medium:not(.banner–mobile-bottom):not(.banner–adapt) .banner__content {
min-height: 34rem;
}

.banner–large:not(.banner–mobile-bottom):not(.banner–adapt) .banner__content {
min-height: 39rem;
}
}

@media screen and (min-width: 750px) {
.banner {
flex-direction: row;
}

.banner–small:not(.banner–adapt) {
min-height: 42rem;
}

.banner–medium:not(.banner–adapt) {
min-height: 56rem;
}

.banner–large:not(.banner–adapt) {
min-height: 72rem;
}

.banner__content.banner__content–top-left {
align-items: flex-start;
justify-content: flex-start;
}

.banner__content.banner__content–top-center {
align-items: flex-start;
justify-content: center;
}

.banner__content.banner__content–top-right {
align-items: flex-start;
justify-content: flex-end;
}

.banner__content.banner__content–middle-left {
align-items: center;
justify-content: flex-start;
}

.banner__content.banner__content–middle-center {
align-items: center;
justify-content: center;
}

.banner__content.banner__content–middle-right {
align-items: center;
justify-content: flex-end;
}

.banner__content.banner__content–bottom-left {
align-items: flex-end;
justify-content: flex-start;
}

.banner__content.banner__content–bottom-center {
align-items: flex-end;
justify-content: center;
}

.banner__content.banner__content–bottom-right {
align-items: flex-end;
justify-content: flex-end;
}
}

@media screen and (max-width: 749px) {
.banner:not(.banner–stacked) {
flex-direction: row;
flex-wrap: wrap;
}

.banner–stacked {
height: auto;
}

.banner–stacked .banner__media {
flex-direction: column;
}
}

.banner__media {
height: 100%;
position: absolute;
left: 0;
top: 0;
width: 100%;
}

.banner__media-half {
width: 50%;
}

.banner__media-half + .banner__media-half {
right: 0;
left: auto;
}

.banner__media-half.animate–fixed:first-child > img,
.banner__media-half.animate–zoom-in:first-child > img {
width: 50%;
}

.banner__media-half.animate–fixed:nth-child(2) > img,
.banner__media-half.animate–zoom-in:nth-child(2) > img {
left: 50%;
width: 50%;
}

@media screen and (max-width: 749px) {
.banner–stacked .animate–fixed:first-child > img,
.banner–stacked .animate–zoom-in:first-child > img {
width: 100%;
}

.banner–stacked .banner__media-half.animate–fixed:nth-child(2) > img,
.banner–stacked .banner__media-half.animate–zoom-in:nth-child(2) > img {
left: 0;
width: 100%;
}

.banner–stacked .banner__media-half {
width: 100%;
}

.banner–stacked .banner__media-half + .banner__media-half {
order: 1;
}
}

@media screen and (min-width: 750px) {
.banner__media {
height: 100%;
}
}

.banner–adapt,
.banner–adapt_image.banner–mobile-bottom .banner__media:not(.placeholder) {
height: auto;
}

@media screen and (max-width: 749px) {
.banner–mobile-bottom .banner__media,
.banner–stacked:not(.banner–mobile-bottom) .banner__media {
position: relative;
}

.banner–stacked.banner–adapt .banner__content {
height: auto;
}

.banner:not(.banner–mobile-bottom):not(.email-signup-banner) .banner__box {
background: transparent;
}

.banner:not(.banner–mobile-bottom) .banner__box {
border: none;
border-radius: 0;
box-shadow: none;
}

.banner:not(.banner–mobile-bottom) .button–secondary {
–alpha-button-background: 0;
}

.banner–stacked:not(.banner–mobile-bottom):not(.banner–adapt) .banner__content {
position: absolute;
height: auto;
}

.banner–stacked.banner–adapt:not(.banner–mobile-bottom) .banner__content {
max-height: 100%;
overflow: hidden;
position: absolute;
}

.banner–stacked:not(.banner–adapt) .banner__media {
position: relative;
}

.banner::before {
display: none !important;
}

.banner–stacked .banner__media-image-half {
width: 100%;
}
}

.banner__content {
padding: 0;
display: flex;
position: relative;
width: 100%;
align-items: center;
justify-content: center;
z-index: 2;
}

@media screen and (min-width: 750px) {
.banner__content {
padding: 5rem;
}

.banner__content–top-left {
align-items: flex-start;
justify-content: flex-start;
}

.banner__content–top-center {
align-items: flex-start;
justify-content: center;
}

.banner__content–top-right {
align-items: flex-start;
justify-content: flex-end;
}

.banner__content–middle-left {
align-items: center;
justify-content: flex-start;
}

.banner__content–middle-center {
align-items: center;
justify-content: center;
}

.banner__content–middle-right {
align-items: center;
justify-content: flex-end;
}

.banner__content–bottom-left {
align-items: flex-end;
justify-content: flex-start;
}

.banner__content–bottom-center {
align-items: flex-end;
justify-content: center;
}

.banner__content–bottom-right {
align-items: flex-end;
justify-content: flex-end;
}
}

@media screen and (max-width: 749px) {
.banner–mobile-bottom:not(.banner–stacked) .banner__content {
order: 2;
}

.banner:not(.banner–mobile-bottom) .field__input,
.banner–mobile-bottom:not(.banner–stacked) .banner__box.color-scheme-1 {
background: transparent;
}
}

.banner__box {
padding: 4rem 1.5rem;
position: relative;
height: fit-content;
align-items: center;
text-align: center;
width: 100%;
word-wrap: break-word;
z-index: 1;
}

.banner–mobile-bottom .banner__box {
padding: 4rem 3.5rem;
}

@media screen and (min-width: 750px) {
.banner__box {
padding: 4rem 3.5rem;
}

.banner–desktop-transparent .banner__box {
padding: 4rem 0;
background: transparent;
max-width: 89rem;
border: none;
border-radius: 0;
box-shadow: none;
}

.banner–desktop-transparent .button–secondary {
–alpha-button-background: 0;
}

.banner–desktop-transparent .content-container:after {
display: none;
}
}

@media screen and (max-width: 749px) {
.banner–mobile-bottom::after,
.banner–mobile-bottom .banner__media::after {
display: none;
}
}

.banner::after,
.banner__media::after {
content: ‘’;
position: absolute;
top: 0;
background: #000000;
opacity: 0;
z-index: 1;
width: 100%;
height: 100%;
}

.banner__box > * + .banner__text {
margin-top: 1.5rem;
}

@media screen and (min-width: 750px) {
.banner__box > * + .banner__text {
margin-top: 2rem;
}
}

.banner__box > * + * {
margin-top: 1rem;
}

.banner__box > *:first-child {
margin-top: 0;
}

@media screen and (max-width: 749px) {
.banner–stacked .banner__box {
width: 100%;
}
}

@media screen and (min-width: 750px) {
.banner__box {
width: auto;
max-width: 71rem;
min-width: 45rem;
}
}

@media screen and (min-width: 1400px) {
.banner__box {
max-width: 90rem;
}
}

.banner__heading {
margin-bottom: 0;
}

.banner__box .banner__heading + * {
margin-top: 1rem;
}

.banner__buttons {
display: inline-flex;
flex-wrap: wrap;
gap: 1rem;
max-width: 45rem;
word-break: break-word;
}

@media screen and (max-width: 749px) {
.banner–content-align-mobile-right .banner__buttons–multiple {
justify-content: flex-end;
}

.banner–content-align-mobile-center .banner__buttons–multiple > * {
flex-grow: 1;
min-width: 22rem;
}
}

@media screen and (min-width: 750px) {
.banner–content-align-center .banner__buttons–multiple > * {
flex-grow: 1;
min-width: 22rem;
}

.banner–content-align-right .banner__buttons–multiple {
justify-content: flex-end;
}
}

.banner__box > * + .banner__buttons {
margin-top: 2rem;
}

@media screen and (max-width: 749px) {
.banner:not(.slideshow) .rte a,
.banner:not(.slideshow) .inline-richtext a:hover,
.banner:not(.slideshow) .rte a:hover {
color: currentColor;
}
}

@media screen and (min-width: 750px) {
.banner–desktop-transparent .rte a,
.banner–desktop-transparent .inline-richtext a:hover,
.banner–desktop-transparent .rte a:hover {
color: currentColor;
}
}

[Supporter]

You can add my as a collaborator in your and i try to solve your issue

[ARTLOUNGE]

@Supporter I would need your email to add you, or you can use collaborator code 2667

[Supporter]

accept it

[ARTLOUNGE]

accepted, thanks

[Supporter]

wait working on it

[Supporter]

can you tell me how you want the banner to show

[ARTLOUNGE]

the banner should display on the desktop version as it currently is, but the content (text and button) should appear in the middle of the banner image. On mobile, it should appear the same, full screen, behind the nav menu and button/text in the middle.

[ARTLOUNGE]

@Supporter - see images, this is how it should appear on desktop, so looks ok to me, however, on mobile, the content text/button needs moving down slightly as it’s too near the logo at the top.

Also, about us on mobile, the footer appears behind the image banner, no idea why either! thanks for your help.

[Supporter]

@ARTLOUNGE Check the mobile Now is it Ok or Not.

[Supporter]

Also check the about us is it ok Now

[ARTLOUNGE]

looks good to me, yes. Thanks for that, what was the issue so I know going forward?

I will want to move the banner content slightly upwards for mobile, so I just want to know for my information so I can update as there is a big gap.

Really appreciate the help

[Supporter]

The issue is in your theme code file in the section-image-banner.css i just add some styling and reduce your font size on mobile

@media screen and (max-width: 749px) {
.banner–stacked .banner__box {
width: 100%;
}
.banner__box > *:first-child {
margin-top: 15vh;
font-size:30px;
}

the changes are underlined and i dont understand what issue is in about page because on my mobile it is ok. Please reload the site and then tell me
}

[ARTLOUNGE]

thanks, on my mobile it looks fine, its just how its displaying in shopify.

Do you know of a way that I can make the active nav menu item a different colour? I did have code in for this, but for some reason its stopped working. I wanted the active menu colour to be F3B60E for both desktop and mobile.

Thanks a bunch