Mobile view - Help Centre

Hi,  setting panel has only a setting to choose the image, 

the image can be updated on specific breakpoints we can use media-query in CSS and change the image.

upload the image in the asset folder and use that in CSS with a media query for devices with different resolutions.

Also, you can see the solution here: 

https://stackoverflow.com/questions/12609110/responsive-css-background-images

Im having the same issue, however right now my code is exactly the same as 
 1263169183150  provided, but it is still not showing the whole image.  its only showing the ⅓ of it. 

Thank you 1263169183150 for your response :)

@Laveeza Yasin, you can see the code in Copenhagen theme where the code is responsive.

Try this and let me know if any issue :)

Hero image wrapper HTML:

<section id="main-content" class="section hero">
  
</section>

CSS:

.hero {
    background-image: url(//theme.zdassets.com/theme_assets/9673686/eabf508….jpg);
    background-position: center;
    background-size: cover;
    height: 300px;
    padding: 0 20px;
    text-align: center;
    width: 100%;
}

Hello!

I have almost the same inquiry as Ema's. 

When I upload the Hero image of the Help center in 1600x300 px size, it appears perfect on desktop view but becomes enlarged on mobile view and cuts out on Apple PC view. We also believe our customers use mobile devices rather than the desktop to open our website and order products. After research, I've come to know that to make the image adjustable and adaptable according to the screen size, we need to add a block of CSS in the main code. 

Can anyone please suggest to me what (block of code) to be added exactly to make the hero image of the help center/community banner/community page hero image adaptable according to the screen size whether mobile or desktop?
1263169183150

Hey Ema Rotariu,

You can achieve it by CSS, but yes something would be changed in your UI for small devices.

Example:- Block on a small device.

Blocks on Desktop:-

I only change the CSS code:-

Hope it would be helpful :)

Thanks 

Team