How do I display as 2 column on mible

Support
#1

Currently it’s showing 1 column

To something like this

#2

Hi there,

Based on your current setup, you will have to hide the text elements that contain the featured columns on mobile and create another text element that will be visible on mobile that will be displayed in two columns.

You can do that by hiding the text elements that you have right now which contains three featured block on mobile. Click on the text element’s customize option and set the Hide During Breakpoints option accordingly so that those elements will be hidden on mobile.

Then, you can create a new text elements which contains all the featured contents like this:

<div class="x-column x-sm col-feature1" style=""><i class="x-icon icon-dm x-icon-search" data-x-icon="" aria-hidden="true"></i><p>SEO </p> </div>
<div class="x-column x-sm col-feature1" style=""><i class="x-icon icon-dm x-icon-search" data-x-icon="" aria-hidden="true"></i><p>SEO </p> </div>
<div class="x-column x-sm col-feature1" style=""><i class="x-icon icon-dm x-icon-search" data-x-icon="" aria-hidden="true"></i><p>SEO </p> </div>
<div class="x-column x-sm col-feature1" style=""><i class="x-icon icon-dm x-icon-search" data-x-icon="" aria-hidden="true"></i><p>SEO </p> </div>
<div class="x-column x-sm col-feature1" style=""><i class="x-icon icon-dm x-icon-search" data-x-icon="" aria-hidden="true"></i><p>SEO </p> </div>
<div class="x-column x-sm col-feature1" style=""><i class="x-icon icon-dm x-icon-search" data-x-icon="" aria-hidden="true"></i><p>SEO </p> </div>

Then set the hide during breakpoints option of the text element so that it will be hidden on desktops views. Also, try adding a class to the new text element and add this CSS (assuming that the class you added is mobile-feature)

@media (max-width: 767px) {
    .mobile-feature .col-feature1 {
        width: 50%;
        float: left;
    }
}

Hope this helps.

#3

Ok, I got it figured out. But I changed all the x-icon-search to other icon shortcode. How come it’s still showing the search icon?

<div class="x-column x-sm col-feature1" style=""><i class="x-icon icon-dm x-icon-search" data-x-icon="" aria-hidden="true"></i><p>SEO </p> </div>
<div class="x-column x-sm col-feature1" style=""><i class="x-icon icon-dm x-icon-external-link" data-x-icon="" aria-hidden="true"></i><p>PPC </p> </div>
<div class="x-column x-sm col-feature1" style=""><i class="x-icon icon-dm x-icon-calendar" data-x-icon="" aria-hidden="true"></i><p>Social Media </p> </div>
<div class="x-column x-sm col-feature1" style=""><i class="x-icon icon-dm x-icon-edit" data-x-icon="" aria-hidden="true"></i><p>Content Marketing </p> </div>
<div class="x-column x-sm col-feature1" style=""><i class="x-icon icon-dm x-icon-envelope" data-x-icon="" aria-hidden="true"></i><p>Email Marketing </p> </div>
<div class="x-column x-sm col-feature1" style=""><i class="x-icon icon-dm x-icon-gears" data-x-icon="" aria-hidden="true"></i><p>Website Optimization </p> </div>
#4

Hi there,

You will also have to change the data-x-icon attribute value.

Hope this helps.

#5

I found the cheatsheet
https://fontawesome.com/cheatsheet#use

But how come some of the icon I used does not work?

<div class="x-column x-sm col-feature1" style=""><i class="x-icon icon-dm x-icon-search" data-x-icon="" aria-hidden="true"></i><p>SEO </p> </div>

PPC

Social Media

Content Marketing

Email Marketing

Website Optimization

#6

Hi there,

Please refer to the Icons available for X here: http://demo.theme.co/integrity-1/shortcodes/icons/

Hope this helps.

#7

Why does my icon not show on mobile?

It should show up as

SEO 

<div class="x-column x-sm col-feature1" style=""><i class="x-icon icon-dm x-icon-external-link" data-x-icon="" aria-hidden="true"></i><p>PPC </p> </div>

<div class="x-column x-sm col-feature1" style=""><i class="x-icon icon-dm x-icon-calendar" data-x-icon="&#xf073;" aria-hidden="true"></i><p>Social Media </p> </div>
<div class="x-column x-sm col-feature1" style=""><i class="x-icon icon-dm x-icon-edit" data-x-icon="" aria-hidden="true"></i><p>Content Marketing </p> </div>
<div class="x-column x-sm col-feature1" style=""><i class="x-icon icon-dm x-icon-envelope" data-x-icon="" aria-hidden="true"></i><p>Email Marketing </p> </div>
<div class="x-column x-sm col-feature1" style=""><i class="x-icon icon-dm x-icon-gears" data-x-icon="" x_icon type="user-md"aria-hidden="true"></i><p>Website Optimization </p> </div>
#9

Hello there,

It is because it is removing ::before CSS selector that helps displaying the icon on mobile. Maybe some code is overriding this.

However, this can be fix. Please update the CSS code given by my colleague to this:

@media (max-width: 767px) {
    .mobile-feature .col-feature1 {
        width: 50%;
        float: left;
    }
    [data-x-icon]:before, [class*="x-icon-"]:before {
        content: attr(data-x-icon);
        line-height: 1;
    }
}

Hope it helps.

#10

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