Search Results for 'css'

Hello freeword,

Please try the code below and place it in Theme panel->Custom CSS area.

The code is ->

.td_smart_list_6 .td-smart-list-button {
background-color: red;
color: black;
}
.td_smart_list_6 .td-smart-list-button:hover {
text-decoration: none!important;
background-color: green;
}

The result -> http://screencast.com/t/9iBPa8an

Thanks.

Hi,
If you plan on using a bigger logo, we suggest using one of the full logo header styles that do not modify the dimensions of the logo: http://screencast.com/t/yb8HBo1Wk99Z
If you do not want those header styles, then you can use this css:

.td-header-style-3 .td-header-sp-logo{
width: 330px!important;
height: 124px!important;
margin:2px!important;
}
.td-header-style-3 .td-header-sp-logo img{
max-height: 200px!important;
}

But you have to adjust the values for each viewport so it will position properly on a responsive design. Add the code in each of the desktop and tablets section and adjust the size so it will fit properly on those devices: http://screencast.com/t/ZBIq2LAm2

Thank you!

Hi,
You can use this css to activate the top menu on mobile:

@media (max-width: 767px){
.td-header-top-menu-full {
display: block;
}
.td-header-sp-top-menu {
display: table!important;
margin-left: auto;
margin-right: auto;
text-align: center;
float:none!important;
}
}

Thank you!

Hi,

You can use this css to do it:
@media (max-width: 767px){
.td-header-style-5 .td-main-menu-logo img {
max-height: 70px!important;
}
.td-main-menu-logo img {
max-width: 185px;
}}

You can change the size in the code to fit your needs. Careful of the smaller screen devices though as if you increase the logo too much, on an old iphone for example, the logo could overlap the hamburger menu.

Thank you!

Hello Koenza,

Please notice that if you are not using the name for your block and you are using the Ajax Filter you will have this case. So, you can set the title for your block and then the ajax filter will be displayed fine or you can use a bit of CSS code to add a padding-top for your block.

The code is ->

.td_block_1 {
padding-top: 35px;
}

The result -> http://screencast.com/t/95t8opAKCt

Notice: This is just an example for Block 1 !

Thanks.

Hello BrunoBerlanga,

Unfortunately, I have done a lot of investigation and indeed, it is a mini bug in our theme. I have added to our list of fixes and in next update, we will fit it. Until this, you can use a bit of CSS code.

The code is ->

.mfp-figure:before {
bottom: 0px;
}

Thank you for your message!

Hello Navito,

Please notice that if you want to change the text from the “Text with separator” element in Visual Composer you will have to change this only if you are using a bit of CSS code. Please try the code below and place it in Theme panel->Custom CSS area.

The code is ->

.vc_separator.vc_separator_align_center h4 {
font-family:Princess Sofia;
}

The result -> http://screencast.com/t/VI75x6bDXXyp

Also, the font that you call with CSS code will have to be loaded in your theme from your Theme panel->Theme Fonts area, otherwise, the font will not be available and this will not appear in the frontend.

Thank you for your message!

Hi,
In order to have the icons position side by side, you will have to assign an extra css class to the row in visual (the row that contains the icons) composer like so: http://screencast.com/t/pjVo354N and then use your custom class with css so you can target the element:
@media(max-width:767px){
.mycustomclass .wpb_column{
float:left!important;
width: 16.66666667%!important;
}
}
Thank you!

Hello VoZz,

In this case, a quick solution for you, if you want to improve the image quality for your mobile devices when using the Block 4 is to try to change the thumbs that are using for this type of block. Please notice that the block 4 uses the module 2. Also, from td_config.php you have to change the get_image parameter like this -> http://screencast.com/t/yhifkpUip with a big thumb dimension. Also, please notice that this solution requires some CSS additional customizations for good results.

Hope this helps!

Thank you for your understanding!

Hello olivervossmann,

I have checked your website and saw that you are using Header Style 8. Please try the code below and add it in Theme panel->Custom CSS area and then your top bar menu will be displayed in the mobile version.

The code is ->

@media (max-width: 767px){
.td-header-top-menu-full {
display:block!important;
}
.td-header-style-8 .td-header-top-menu {
display: block!important;
}
.td-header-sp-top-menu {
display: block !important;
}
.td-header-style-8 .td-header-top-menu {
margin-left:0;
width: 100%;
}
}

The result you should see here -> http://screencast.com/t/KOf6LfoLz

Thanks.