Recent searches
No recent searches
Mobile view - Help Centre
Answered
Posted May 25, 2022
Hello,
We are looking at revamping our Help Centre and trying to identify the best way to adapt it on mobile - as our main user base is using mobile devices rather than the desktop version.
What I am trying to achieve mainly is a wrap of the categories on the mobile version (same way they are being displayed on desktop).
I did not find any relevant article and I am not sure where I should go in the code to make that happen.
For visuals this is the Desktop theme and I want it to show the same way (obviously smaller size) when I open it on mobile - instead of having to scroll to see each category.
1
6
6 comments
Ifra Saqlain
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
1
Laveeza Yasin
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?
Ifra Saqlain
0
Ifra Saqlain
@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:
CSS:
0
Laveeza Yasin
Thank you Ifra Saqlain for your response :)
0
Vicky
Im having the same issue, however right now my code is exactly the same as
Ifra Saqlain provided, but it is still not showing the whole image. its only showing the ⅓ of it.
0
Ifra Saqlain
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
0