How to align text on 'right' image banner + change font color

Store Design
, ,
1

I’m wondering if it’s possible to have the text just on the right image instead of it overlapping to the first one. I’m using an image banner. I have the desktop content ‘middle right’ and desktop content alignment ‘right’. I’m not sure how else to fix this. Can the font color also be changed?

Thanks!

https://fleurelleflowers.myshopify.com/

Screen Shot 2023-01-21 at 7.40.06 AM.png
Screen Shot 2023-01-21 at 7.40.06 AM.png1617×757 198 KB

2

@smander - add this css to the very end of your base.css file and check

@media only screen and (min-width: 750px){
#Banner-template--17308519792962__e0584c6b-1583-423d-b99a-721eb340cb85 .banner__box{padding:0;}

#Banner-template--17308519792962__e0584c6b-1583-423d-b99a-721eb340cb85 .banner__heading{color: #000;}

#Banner-template--17308519792962__e0584c6b-1583-423d-b99a-721eb340cb85 .banner__text{color: #000;}
}
3

I was able to change the text color but noticed it changes it on the second image banner I have on that page too which I don’t want. If I choose ‘show container on desktop’ which changes the font darker, is there a way to remove the background colour?

4

@smander

suyash1_0-1674307516620.png
suyash1_0-1674307516620.png1366×768 198 KB

5

@smander

Hi,

Please add the code below to Assets > base.css file.

@media only screen and (min-width: 750px) {
  div#Banner-template--17308519792962__e0584c6b-1583-423d-b99a-721eb340cb85>.banner__content.banner__content--middle-right.page-width {
    width: 100% !important;
    margin-right: 36px;
  }
  .banner__content.banner__content--middle-right.page-width>.banner__box {
    padding: 0 !important;
  }
  .banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient>h2, .banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient>div {
    color: #000;
    max-width: 100% !important;
    width: 100%;
    margin: 0;
    padding: 0;
  }
}

It’s only for the section.

Hope it helps.

1 Like
6

@DavidEKim this worked super, but it moved the button to the left on my second image banner, can it be re-centered?

7

Please add the code below to the last part of my previous code.

.banner__buttons {
    display: flex;
    justify-content: center;
  }

The complete code will be as below.

@media only screen and (min-width: 750px) {
  div#Banner-template--17308519792962__e0584c6b-1583-423d-b99a-721eb340cb85>.banner__content.banner__content--middle-right.page-width {
    width: 100% !important;
    margin-right: 36px;
  }
  .banner__content.banner__content--middle-right.page-width>.banner__box {
    padding: 0 !important;
  }
  .banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient>h2, .banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient>div {
    color: #000;
    max-width: 100% !important;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .banner__buttons {
    display: flex;
    justify-content: center;
  }
}

That’s the PC view only.

For mobile view, the text will be overflow the right box.

You may use the code below to change the text color in mobile view.

@media only screen and (max-width: 749px) {
  .banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient>h2, .banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient>div {
    color: #000;
    max-width: 100% !important;
    width: 100%;
    margin: 0;
    padding: 0;	
    text-shadow: 1px 2px 2px #eee;
    background: rgba(255,255,255,0.5);
    border-radius: 10px;
  }
}

I added transparent background for the text box in mobile view.

Hope it helps