Disable responsive on the specific section

Support
#1
Summary

https://myalliance.io/test-pie1/

i just want to disable the specific section of the chartpie because it will not look good in mobile or small screen.
probably will add more content later on but on the piechart section will not be responsive

thanks

#2

Hey Jessie,

There is no option to disable the theme’s responsive breakpoints. A lot of custom code will be required for that so that would be outside the scope of our support.

I’d recommend instead that you hide your section in smaller screens using the Hide During Breakpoints option.

Then, you can add a new section and hide it in larger views then add the mobile version of your chart in the new section.

Thanks.

#3

ohh/ my problem is in mobile all columns will be converted to one. how should i make it the same column from desktop.

right now i have 4 row with
2 columns
2 columns
3 columns
2 columns
and desktop

how should i retain that columns in mobile?

#4

Hi,

To achieve that, you can add a class to rows that you want the columns to retain.

Then add this in Theme Options > CSS

@media (max-width: 767px) {
.my-row .x-column.x-1-3 {
    float: left;
    width: 30.66666%;
    margin-right: 4%;
}

.my-row .x-column.x-1-2 {
    float: left;
    width: 48%;
    margin-right: 4%;
}

.my-row .x-column.last, 
.my-row .x-column:last-of-type {
    margin-right: 0;
}
}

Hope that helps

#5

i manage to solved it but the problem now is the columns are overlapping the other columns or what do you call that.
check the circle button inside the pie

i just want to make the dropdown in the front of all content. just like the navigation menu dropdown works.
same link as above

#6

Hi there,

Please try adding this to X > Theme Options > CSS:

.x-colophon.top {
    z-index: 0;
}

Here are some related links of the suggestions above for further reading:

Hope this helps.

#7

not sure if you get what i mean. i believe .x-colophon.top is the footer.
what i want is the content area dropdown check image

i tried z-index but still not working

#8

Hi Jessie,

Sorry for the confusion, actually if you take a look on your screenshot above you’ll see that the dropdown is covered by the footer, so its part of the issue. To resolve that please set your footer z-index to -3

.x-colophon.top {
    z-index: -3;
}

Then set this section’s z-index to -2



And then this Row to -1



Hope it helps,
Cheers!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.

#10