Skip to main content
Asked a question 8 months ago

The size for announcement on desktop and mobile are different. Therefore the background picture gets cropped. Is there a CS code to make sure that the view for the announcement on both desktop and mobile are the same?

Where am I?

In Tribe you can ask and answer questions and share your experience with others!

Hi @Kacey Langston11 
The background image for announcement dynamically reposition itself based on the size of the screen. Using an image with text is not recommended as the text can't reposition itself. 

The default CSS property of the announcement image is set to  "cover"
meaning the image tries to fill the announcement box if its size changes. 

However, with a bit of a css you can define the position of the background image. 
You can use the class ".community-announcement" to change the properties of the image and use breakpoints to to target different properties based on the screen size.

I am not going to suggest any css code as we would not recommend any specific css changes since we are rolling updates to product on regular basis and in future releases, it might break your changes.

We are going to give more control over the image without the need to modify the css in future releases.