How can I align text and image in a banner using CSS?

Store Design
, , ,
1

I have a question regarding Shopify. I have a banner where I need to align the text to the right and the image to the left. This will prevent the text from overlapping onto the image. Please refer to the image below.
How can I make this change? Is this through CSS?
Thank you

Screenshot 2023-06-13 at 09.43.55.png
Screenshot 2023-06-13 at 09.43.55.png882×866 325 KB

1 Like
2

Add this code in css file

.banner-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.banner-container .banner-image {
  flex: 1;
}

.banner-container .banner-text {
  text-align: right;
}
3

Hi @DBU

Please share your website so we can provide a code appropriate for you

4

https://Dressedbyubuntu.myshopify.com

1 Like
5

Hi @DBU ,

Would you mind to share the password also? It is protected. Thanks!

6

Hi NomtechSolution
I’ve added this to the css section of my banner and nothing’s changed. Any idea?

7

Please check your inbox. I’ve sent it there