Home › Forums › Basel support forum › Icons used on FAQ demo page
Icons used on FAQ demo page
- This topic has 35 replies, 2 voices, and was last updated 1 year, 1 month ago by Elise Noromit.
-
AuthorPosts
-
October 25, 2023 at 10:49 am #506988
TuomoParticipantHi 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 NurkkalaOctober 25, 2023 at 2:06 pm #507058
TuomoParticipantI 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.
October 25, 2023 at 2:57 pm #507110
Elise NoromitMemberHello,
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
October 25, 2023 at 4:42 pm #507160
TuomoParticipantHere you go:
October 25, 2023 at 4:43 pm #507161
TuomoParticipantYou can find these in Pages -> Frontpage (Etusivu).
October 25, 2023 at 8:18 pm #507226
TuomoParticipantSorry, the adjustments are only done in https://www.sukat.com site and not in https://www.alusvaatteet.com site.
October 25, 2023 at 9:44 pm #507242
TuomoParticipantI 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. :/
October 26, 2023 at 1:23 am #507266
Elise NoromitMemberHello,
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
October 26, 2023 at 1:51 am #507273
TuomoParticipantHi 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.October 26, 2023 at 1:56 am #507278
TuomoParticipantHere 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.October 26, 2023 at 2:51 am #507293
Elise NoromitMemberHello,
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
October 26, 2023 at 9:28 am #507352
TuomoParticipantHi 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.October 26, 2023 at 9:31 am #507358
TuomoParticipantHere is the mobile icons.
Attachments:
You must be logged in to view attached files.October 26, 2023 at 9:38 am #507364
TuomoParticipantYou 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. :/
October 26, 2023 at 2:15 pm #507497
Elise NoromitMemberHello,
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
October 26, 2023 at 2:48 pm #507526
TuomoParticipantHi 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 NurkkalaOctober 27, 2023 at 2:21 am #507673
Elise NoromitMemberHello,
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
November 1, 2023 at 2:32 pm #509074
TuomoParticipantHi 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.comNovember 1, 2023 at 7:07 pm #509167
Elise NoromitMemberHello,
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
November 1, 2023 at 8:21 pm #509181
TuomoParticipantHi 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.November 1, 2023 at 8:26 pm #509183
TuomoParticipantIt 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>
November 2, 2023 at 1:07 am #509205
Elise NoromitMemberHello,
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
November 2, 2023 at 10:00 am #509250
TuomoParticipantDo 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>
November 2, 2023 at 11:10 pm #509468
Elise NoromitMemberHello,
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
November 2, 2023 at 11:29 pm #509469
TuomoParticipantHi Elise,
Okay, here you go:
November 4, 2023 at 2:50 am #509796
Elise NoromitMemberHello,
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
November 4, 2023 at 10:44 am #509829
TuomoParticipantHi 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.November 5, 2023 at 12:42 am #509944
Elise NoromitMemberHello,
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
November 5, 2023 at 1:04 am #509953
TuomoParticipantHi Elise,
Where can I find these videos from?
Best Regards,
Tuomo NurkkalaNovember 6, 2023 at 12:22 am #510030
Elise NoromitMemberHello,
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
-
AuthorPosts
The topic ‘Icons used on FAQ demo page’ is closed to new replies.
- You must be logged in to create new topics. Login / Register