Problem with Icon List on Mobile version

[OLIV1]

Hi everyone

I need a help regarding my Icon List showing on the mobile version is not the same like in Desktop or tablet version

what I want is the Icon List is " One Line " like in desktop version with a minimal border in between " header & Banner "

Website : www.oscarliving.co.id

Theme : Empire 11.1.3

Here is what I want

and here is The Preview in mobile version

anyone can help me please

[ProtoMan44]

@OLIV1 , hey, thanks for posting here.
 Please remove this margin top of the next section of it :

just put this CSS in sections custom CSS:

@media and (max-width: 800px){
 {
    margin-top: 0 !important;
 }
}

 Don't forget to mark my comment as solved if it helps to solve your issue.

[OLIV1]

Hi Protoman how can I found that ??

[TheScriptFlow_]

Please paste the following code in the end of theme.css file.

@media screen and (max-width: 767px) {
    .shopify-section:first-child .home-section--content:first-child {
       margin-bottom: 3rem;
    }
.home-section--content.logolist--inner {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
}
}

results:

[OLIV1]

Hi Scriptflow

I tried to copy and Paste of that in the Theme css but it doesnt work

however, I tried to put it on Custom css Code and its work...... BUT. the margin on the top is too Big

How can we adjust that ??

Thank you so much

[Rohail_Ali_12]

Hi @OLIV1,

I hope you're doing well. I’ve reviewed the website you shared. There are two ways we can align the icons in a single row across all devices (desktop, tablet, and mobile) by adding some custom code to the theme.

We can either:

1. Enable horizontal scrolling on tablet and mobile devices, or

2. Convert the icons into a slider.

Could you please check if your theme's section settings include an option to enable a slider on mobile devices?

Best regards,

[OLIV1]

I dont think we have those 2