Content not shown in smartphone version

[Alphalio]

Hey guys,

I have a section where the smartphone version is broken. Some images aren’t even shown
Please see the images. Desktop version is how it should look like

Thank you very much

The URL is: http://www.benouattara.com/startseite/

[john]

Hey,

Fix it adding following CSS under the code below to X > Launch > Options > CSS

.el167.x-container {
    padding: 0 !important;
}
}```

[Alphalio]

Hey @john

Thank you for your answer!
I added the CSS. But it does not look like it should. What can I do that the icons are all in a row at the mobile version?

[jade]

Hi there,

The columns display stacked on mobile because of the responsive nature of the theme.

You can override it by adding this code:

@media (max-width: 767px) {
    .el167 .x-column.x-1-5 {
        width: 20% !important;
        float: left !important;
    }
}

Hope this helps.

[Alphalio]

Hey there,

I inserted the code and deleted the previous one from your colleaque John. But it still doesn’t work. I attached a picture that you can see what is wrong.

What would be a solution?

Best regards and many thanks for your help!

[jade]

Hi there,

No, kindly just add the code I provided after the code John gave or combine them to this:

@media (max-width: 767px) {
    .el167 .x-column.x-1-5 {
        width: 20% !important;
        float: left !important;
    }

    .el167.x-container {
    padding: 0 !important;
    }
}

Hope this helps.

[Alphalio]

This helped. You are great!
Thank you

[Alphalio]

Actually it only worked for a short time. I haven’t changed anything but now it doesn’t work again. Did I make mistake?

[christian]

The current side padding setup of your Row containing your social images is em based. Please change to percentage based unit.

Columns stack out of the box, you will custom media queries like @Jade has given. Since that uses custom code, issues arising from the use of it and further enhancements would be outside the scope of our support.

We do have an in-house custom development team that offer paid services, who may be able to assist. They can be contacted at pinnacle@theme.co if this is of interest to you.

Thank you for your understanding.

[Alphalio]

Hey there thank you for your answer

To be honest I do not understand what I have to do now. Why did it work last time for an hour or so and then didn’t work after?

[friech]

Hi There,

That section is hidden in medium, small, and extra small screen so yup you won’t be able to see that section on mobile.

To make that section visible on all screen sizes, on the content builder please inspect that section, and under its Customize tab turn off all the Hide During Breakpoints options.

Lets revise the CSS code that John and Jade provided so it will work even if you move the sections around or add/remove a section.

To do this, please assign a CLASS to your section (e.g. myclass)

Then update the given custom CSS to this:

@media (max-width: 767px) {
    .myclass .x-column.x-1-5 {
        width: 20% !important;
        float: left !important;
    }

    .myclass .x-container {
    padding: 0 !important;
    }
}

Hope it helps,
Cheers!