Icons used on FAQ demo page

Hi there,

I was wondering how can I make these FAQ page demo page vc_icon_element-icon’s mobile friendly?
Now they are just desktop friendly.
I have made Row Settings, Extra class name for mobile (headertext) and desktop (headertextmobile) and these dont work the way I want them to do for FAQ page demo page icons and texts.

Custom CSS for mobile landscape, Custom CSS for mobile:
body .headertext{
display:none;
}

Custom CSS for desktop, Custom CSS for tablet, :
body .headertextmobile{
display:none;
}

These upper CSS works to all other Icons and text blocks, but not to this type of text block content:

<span class=”fa fa-rocket” style=”color: #d3d3d3!important; float: left; font-size: 38px; margin: 0 10px 0;” aria-hidden=”true”> </span><span style=”color: black;”>Toimitus 1-4
arkipäivässä</span>

Best Regards,
Tuomo Nurkkala

I am trying to have these FAQ page demo page vc_icon_element-icon’s with text on mobile two icons side by side and on desktop mode 4 side by side. This desktop mode works just fine, but when I change the Colums Settings -> Responsive Options -> No Offset -> 6 columns – 1/2 for mobile it wont work, because the Row Settings -> Design Options has padding 80px on the left side. The 80px padding for the left side is nice for desktop mode, but it is not working for mobile and there is nothing that I can change for mobile settings for the paddings.

Hello,

Please insert the site admin access into the Private content below the message area. We will take a closer look at the case.

In addition, please provide the page URL.

Best Regards

Here you go:

You can find these in Pages -> Frontpage (Etusivu).

Sorry, the adjustments are only done in https://www.sukat.com site and not in https://www.alusvaatteet.com site.

I made some Testimonial text to Pages -> Frontpage (etusivu) in https://www.alusvaatteet.com and the added CSS headertext and this works just fine, but when I did the Products (grid or carousel) to the frontpage as well these added CSS texts wont help either. I dont know what is wrong with the site. :/

Hello,

Sorry for the delay, could you kindly provide the screen of the icons you mean?

You can set any number of columns: https://wpbakery.com/video-academy/responsive-column-control-width-offset-param-usage-explained/ and https://wpbakery.com/video-academy/control-elements-different-devices-responsive-column-controls/

If you still have a problem, please provide the screen of the block.

Best Regards

Hi Elise,

These are the new icons with text which I tried in https://www.sukat.com frontpage. I took the screenshots with mobile phone so those look little bit off.

Attachments:

You must be logged in to view attached files.

Here is the Products (grid or carousel) from https://www.alusvaatteet.com frontpage. I have deactivated those rows because they wont work properly.

Attachments:

You must be logged in to view attached files.

Hello,

You need to enter every column and set the 6 columns = 50% one half you will have two columns
3 columns = 25% forth you will have four columns
4 columns = 33 % one-third you will have three columns.

All the columns should be in one row.

If you have any questions please feel free to contact us.

Best Regards

Hi Elise,

So I can’t make anymore icons’ only to been seen in desktop or mobile?
Before I was able to make all content for desktop and ruling out mobile output and vice verse.
With these CSS codes I could rule out either of them out:

body .headertekstimobiili{
display:none;
}

body .headerteksti{
display:none;
}

Attachments:

You must be logged in to view attached files.

Here is the mobile icons.

Attachments:

You must be logged in to view attached files.

You can check for example our sites HTML Blocks -> Footer and there you can see that one footer is done for desktop mode and one for mobile mode. I don’t understand why I can’t make new content just for mobile experience or desktop experience, but the old content that I have made long time ago still works just fine. :/

Hello,

If you want to show different content on desktop and mobile, you can create two rows, assign the class, and hide /show them on desktop /mobile accordingly.

If you want to change the structure of the columns, for example, you want 4 for desktop, 4 for tablet, and 2 columns in mobile in two rows, you would better configure the columns responsibly in the settings.

If you want to hide this row https://gyazo.com/35c3aeab76be6dc23fa677f309541a76 , please add this code to the field where you want to hide it: Theme Settings > Custom CSS > Mobile/Tablet/Desktop:

body .vc_row.headerteksti {
    display: none;
}

next code is:

body  .vc_row.headertekstimobiili{
display:none;
}

If you have any questions please feel free to contact us.

Best Regards

Hi Elise,

Thanks you very much! Those CSS codes made the trick! 🙂

Before these codes made the trick.

body .headertekstimobiili{
display:none;
}

body .headerteksti{
display:none;
}

Is it because WordPress and woocommerce has updated their code, so those old CSS codes wont work everywhere anymore?

Best Regards,
Tuomo Nurkkala

Hello,

This code should work regardless of the updates, in case if does not let us know, and we double check.

If you have any questions please feel free to contact us.

Best Regards

Hi there,

I was wondering that is there a possibility to add an backround shape under this icon?

<span class="fa fa-rocket" style="color: #d3d3d3!important; float: left; background_style= rounded ; color: #black!important align: center; font-size: 38px; margin: 0 10px 0;" aria-hidden="true"> </span><strong><a href="/?page_id=5568"><span style="color: #4c4c4c!important;">Toimitus 1-4
arkipäivässä</span></a></strong>

I tried to add these type of codes to the upper code, but with no success:

background_style= rounded ; color: #black!important

You can find these icons on the frontpage of my websites:
https://www.sukat.com &
https//www.alusvaatteet.com

Hello,

Could you kindly provide the page URL with the icons so that I can give you custom CSS?

If you have any questions please feel free to contact us.

Best Regards

Hi Elise,

They are on the front page with both sites.
You can look at https://www.sukat.com for example.

Attachments:

You must be logged in to view attached files.

It is only possible to do with WPBakery Page Builder -> Enter custom layout for your row -> 1/6 + 1/6 + 1/6 + 1/6 + 1/6 + 1/6. So I could make the Icons with that with backround, but the maximum is 3 icons with texts, so if I want more icons with texts this is the only solution in one row:

<span class="fa fa-rocket" style="color: #d3d3d3!important; float: left; background_style= rounded ; color: #black!important align: center; font-size: 38px; margin: 0 10px 0;" aria-hidden="true"> </span><strong><a href="/?page_id=5568"><span style="color: #4c4c4c!important;">Toimitus 1-4
arkipäivässä</span></a></strong>

Hello,

WP bakery page builder offers an icon option to set icons with background and without background, at the same time both icon and background would be the same color.

If you have any questions please feel free to contact us.

Best Regards

Do you mean that in this case it is not possible to have different color backround?

<span class="fa fa-rocket" style="color: #d3d3d3!important; float: left; background_style= rounded ; color: #black!important align: center; font-size: 38px; margin: 0 10px 0;" aria-hidden="true"> </span><strong><a href="/?page_id=5568"><span style="color: #4c4c4c!important;">Toimitus 1-4
arkipäivässä</span></a></strong>

Hello,

The structure and inner styles make it impossible to change the background, please provide the site admin access in the private area and page, I will check and perhaps I will offer a workaround.

If you have any questions please feel free to contact us.

Best Regards

Hi Elise,

Okay, here you go:

Hello,

You can find the option to set different colors and backgrounds in the element settings: https://gyazo.com/0da122b7446d8accce5568ea432585f6

If you have any questions please feel free to contact us.

Best Regards

Hi Elise,

Yes I know this. But I can have with this way only 3 icons with text, not more than that.
With these codes I can have more than 3 icons in a row:

<span class="fa fa-rocket" style="color: #d3d3d3!important; float: left; background_style= rounded ; color: #black!important align: center; font-size: 38px; margin: 0 10px 0;" aria-hidden="true"> </span><strong><a href="/?page_id=5568"><span style="color: #4c4c4c!important;">Toimitus 1-4
arkipäivässä</span></a></strong>

Attachments:

You must be logged in to view attached files.

Hello,

You need to set the columns in the row, then insert the inner row, please check video tutorials to find the instructions and then divide the two into two columns.

If you have any questions please feel free to contact us.

Best Regards

Hi Elise,

Where can I find these videos from?

Best Regards,
Tuomo Nurkkala

Hello,

Please check this one: https://wpbakery.com/video-academy/insert-inner-row-wpbakery-page-builder-wordpress/

If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts