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

image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

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


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


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

@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%;
}

0


Thank you Ifra Saqlain for your response :)

0


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


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

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


Please sign in to leave a comment.

Didn't find what you're looking for?

New post