Search Results for 'css'

Hi,

That is a font icon predefined in the theme
– https://www.screencast.com/t/XuAnAnUHvutm
It is applied with CSS in the theme stylesheet
– https://www.screencast.com/t/7SxZYXmRW1r
So if you want to replace that icon with the word “Views” you could make the modification there, in the stylesheet. Or use a custom code like this to override it
– https://www.screencast.com/t/uE0eol92

.td-icon-views:before {
content: 'Views';
}

The code can be entered in Theme panel->CUStom CSS code.
Additional styling may be required since there is no theme style for displaying a word in that location.

Thanks

Hello admin_kh,

You can try using our Advanced Custom CSS and add your code in that fields from here -> https://www.screencast.com/t/sEBRb8D80vM according to your targeted device. Also, for more information about media queries, please check here -> https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Hope this helps!

Thanks for the message!

Hello Ladiesabroad,

I have inspected your source page and I saw that you have some custom CSS code which overwrites the default theme settings as you can see here -> https://www.screencast.com/t/lWHPRSYBGYEs If you want to achieve good results for mobile devices, you should adjust the font-size and line-height using the media querries.

Thanks for the message!

Hi,

The easiest way would be to use Font awesome icons, like this
– https://www.screencast.com/t/GuoueFzXAk
Simply install the Font awesome 4 menus plugin and enter this code in Theme panel->Custom CSS section, the result should be like in the screenshot

ul.sf-js-enabled > li > a > i.td-icon-menu-down:before {
font-family: FontAwesome;
content: '\f067' !important;
}

The list of icon codes can be found here for example, so you could use any icon you want
– http://astronautweb.co/snippet/font-awesome/

Thanks

Hello,

This effect can be seen when changing the header color multiple times. The default color is blue, then you change it to green and on mobile change it to black. CSS works in cascades. If an element is changed many times, you will be able to see the changes as the code loads up.
Also using speedbooster and moving the css to the footer, it will load slower.
Also your page seed influences the css load so please follow google.s advice: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fbestlavka.ru%2F&tab=desktop
Please use this guide: https://forum.tagdiv.com/how-to-make-the-site-faster/

Thank you!

Please provide a link to your site so I can inspect the css and see why it does not apply.

Thank you!

Hello Alan,

It is not the custom class that breaks the layout. It is the css you created for that class that does. Please remove your code from the custom code section. A simple extra class has absolutely no influence over the css. Please add a completely new class, one that you did not use in the custom code section and you did not apply any css to.
Css is very complex and very specific. Please use the browser inspector to test your code first.

Thank you!

Hi,

Then you could enter the code in the Advanced CSS desktop section. This way the code will not affect the mobile version. Enter it without any media queries, they are not necessary there.
So remove it from there and enter this one in the desktop section in Advanced CSS, it should work properly

.td-header-style-9 .header-search-wrap {
right: 168px;
}

Thanks

Hi,

@ianternet I believe you are referring to the margin after the header. It seems there is a header ad code entered in the theme panel, but the ad is not displaying. The theme detects it and ads a margin top, see header style 6 here
– https://forum.tagdiv.com/header-styles/
There is an approval period before Google ads are displayed on the website, it may take a while according to them
– https://support.google.com/adsense/answer/76228?hl=en
I could give you a code to remove that margin
– https://www.screencast.com/t/56I9eni8E

@media (min-width: 1019px) {
.td-header-style-6 .td-header-sp-recs {
margin-top: 0!important;
}}

Enter the code in Theme panel->Custom CSS section if you decide to use it.

Thanks

Hi,

It may require some m ore modifications. When creating the demo the team made sure that the code will only apply for that particular block, and not affect other similar type blocks.
I have modified the code (no need to enter the body class), the result is like this
– https://www.screencast.com/t/KoWO4kfScTW
Now this code once entered in the custom CSS section will apply to all blocks 15. This is the code
– https://pastebin.com/zSsr9dUb
It could be made more specific by modifying it again, for example by using the page ID in the code (it will apply only in that page)
– https://www.screencast.com/t/Xv788tPas
That page ID class will have to be entered before every line. Hope this helps.

Thanks

Hi,

Please try entering this code in Theme panel->Custom CSS section, it should fix the problem with block 16
– https://www.screencast.com/t/dXPFP84Gf

@media (max-width: 767px) {
.td_block_16 .td-block-row [class*="td-block-span"] {
float: left;
}}

Please let us know if there still is a problem.

Thanks

Hi,

I have inspected the website you provided, seems there are some conditions that are affecting the header search on mobile
– https://www.screencast.com/t/Q3LcbGAb13e
These codes are overriding the default theme conditions, if you were to remove them the result will be like this
– https://www.screencast.com/t/yW3WfxdC6O
I could give you a code to further override these but it would be better to remove the customization. Please check the theme custom CSS code section and remove these codes if they are located there.

Thanks