Search Results for 'css'

Hello haugao93,

Unfortunately, please notice that our theme does not support any full-width page and that’s why you cannot achieve this, sorry!
Our product does not have such an option for dynamic width and we do not recommend to do that through the custom CSS code because the layout of the theme will be damaged. If you want to change the width of the theme to be in full-width mode, please notice that is not a simple task and you will have to adjust the entire theme to the new width for better results.
So, please notice that you can try using our full-width elements from here -> https://www.screencast.com/t/LRlcy3d6Hdo

Thanks for your understanding!

Hello sunnydream,

I guess that you want to display 3 videos one after the other in post content, right? You should add in the post containing your desired YouTube videos and then, use a bit of CSS code you can achieve this -> https://www.screencast.com/t/liknMWbho

Try the code below and place it in Theme panel -> Custom CSS Area.

.td-post-content iframe{
float:left;
margin-left: 2px;
max-width:33%!important;
height:200px!important;
margin-bottom:10px;
}

Thanks for the message!

Hi,

Try something like this – https://www.screencast.com/t/UfiN3Lol
The code must be entered in Theme panel->Custom CSS if you decide to use it

.td-header-style-12 .td-header-sp-top-menu {
float:none;
text-align:center;
}

Thanks

Hi,

Remove all the code you have entered concerning the font for this module. Remove it from the Custom CSS or Advanced CSS sections. Then enter this code in the Advanced CSS desktop field

.class1 .td-module-title a {
font-size: 33px;
font-weight: 700;
line-height: 35px;
}

Thanks

Hello latihlogika,

I guess that you want to stretch the image for mobile devices, right? You should simply eliminate the paddings through this code. Place it in Theme panel -> Custom CSS Area.

@media (max-width: 767px){
.td-container, .tdc-row {
padding-left:0;
padding-right:0;
}
}

The result is here -> https://www.screencast.com/t/4Jq5oqB5Gfia

Thanks for the message!

Hi,

Then you could maybe increase the height of the featured image, in post template 7. If the image used is big enough there should be no problem. This post template has a fixed height of 700px, it could be changed with a code like this

.td-post-template-7 .td-post-header{
height:900px;
}

This code should be entered in Theme panel->Custom code->Advanced CSS, in the desktop section, so it only applies for desktop.
Post template 3 uses a thumbnail for featured image
– https://www.screencast.com/t/aVt36W9y
If it would be stretched with code to full width, the image may not look properly. Try the provided code and it will increase the height of the post header image, in post template 7. Maybe experiment with different values for the height.

Thanks

Hello kaibehrmann,

You can adjust this from the following custom CSS code.

.widget_text .textwidget{
font-size: 16px;
line-height:24px;
}

The result is here -> https://www.screencast.com/t/Nlh5X40DXo

Thanks for the message!

Hi,

The scroll to top arrow does not have any options to change it. It could be customized with custom CSS code, depending on what you would like to do to it.
A code like this in Theme panel->Custom CSS will remove it

.td-scroll-up {
display: none;
}

A code like this will align it to the left
– https://www.screencast.com/t/sfpRytLmi

.td-scroll-up {
left:5px;
}

You can use the browser inspector to further customize the button, if you wish
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks

Hi,

That would be possible with some CSS code. For example if that particular category would be Travel, the code would be like this
– https://www.screencast.com/t/7uM9lwijjit9

.category-travel .td-post-date,
.category-travel .td-author-line {
display:none;
}

Try this suggestion with the category you want and check the results. The final code must be entered in Theme panel->Custom CSS section.

Thanks

Hello JessieT,

Yes, it’s possible if you are using such a custom CSS code. Check the following documentation here -> https://www.w3schools.com/cssref/css3_pr_text-justify.asp and here
-> https://www.w3schools.com/cssref/pr_background-color.asp We have a useful tutorial for creating an own custom CSS code. Please check here -> https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Hope this helps!

Thanks for your understanding!

Hi,

You could change the value entered here
– https://www.screencast.com/t/XmaW7mrXr
Also increase the width limitation in CSS, the result would be like this
– https://www.screencast.com/t/0tTuMy3mu9
– https://www.screencast.com/t/pq7mIq8bCNIA
This is the CSS code, modify it according to the width you choose, then enter it in Theme panel->Custom CSS section

.comment .avatar {
width: 100px;
}

Thanks

Hello,
The size depends on your logo size. If I am to provide a code I will need a link to your site so I can test it on your logo.
This code works on the default logo:

.td-header-style-11 .td-logo-wrap-full .td-logo{
line-height: 109px;
}
.td-header-style-11 .td-logo-wrap-full{
min-height: 110px;
}

If you want to remove the header section completely, you can use this css code:
.td-header-style-11{
display:none;
}

Thank you!

Hi,

That design is created only for demo purposes, it is made only from HTML and some CSS to style it. Like this
– https://www.screencast.com/t/QNMgIvpuHL
– https://www.screencast.com/t/qJAMeQa6
It would be considered impractical to use this if you are going to create multiple recipe posts. Better try a recipe plugin, it would be easier maybe.
Anyway this is the HTML used in the demo posts, if it would be useful to you

<div class="td-recipe-time">
<div class="td-recipe-info">Prepare time: 20 min</div>
<div class="td-recipe-info">Cook: 2 hr 30 min</div>
<div class="td-recipe-info">Ready in: 2 hr 50 min</div>
<div class="clearfix"></div>
</div>

And the CSS that must be entered in Theme panel->Custom CSS section

.td-recipe-time {
width: 100%;
border: 1px solid #ededed;
padding: 11px 16px;
margin-bottom: 26px;
}
.td-recipe-time .td-recipe-info {
float: left;
width: 33.3333%;
}
@media (max-width: 1018px) {
.td-recipe-time .td-recipe-info {
width: 100%;
}}

Thanks

Hi,

As a comparison you could check the Google search page source, which contains only the search function
– view-source:https://www.google.com/
So basically you would like to make the website faster. That can be done regardless of how many lines are being loaded in the page source (HTML, CSS etc) There are many topics on the forum in this matter that you could follow. Some of them here
– https://forum.tagdiv.com/topic/score-100100-pagespeed-with-newspaper-wordpress-theme/
– https://forum.tagdiv.com/topic/newspaper-theme-speedify-your-website/
– https://forum.tagdiv.com/topic/tutorial-chriss-custom-optimizations-for-functions-php-etc/
– https://forum.tagdiv.com/cache-plugin-install-and-configure/
– https://forum.tagdiv.com/cloudflare-cdn/
– https://forum.tagdiv.com/how-to-make-the-site-faster/
– https://forum.tagdiv.com/topic/tinymce-advanced-and-other-various-disabling-speed-boster/

Thanks

Hi,

That is a design choice for that particular demo. You could remove it with a code like this for example, in Theme panel->Custom CSS section
– https://www.screencast.com/t/NhYXDqgnYwg

.td-sound-radar .td-header-style-1 .td-header-menu-wrap:before {
display: none;
}

Or remove it directly for the demo stylesheet
– https://www.screencast.com/t/VuTmWZkq1
You could customize it if you wish, I will help you if you could provide details about hwo you wish it to be.

Thanks

Hi,

You could enter the code in the Advanced CSS section. If you want it to apply only for desktop, enter it in the desktop section
– https://www.screencast.com/t/6olh7daevN
The the code will affect only desktops, not mobile.
Or configure the font how you want using theme panel options (each module article title can be customized) and then create a custom code for mobile
– https://www.screencast.com/t/X7BphryFS
Here is a list mentioning then modules that each block or grid are made of
– https://forum.tagdiv.com/theme-blocks-modules/

Thanks

Hi,

There seems to be a code that prevents the avatars from displaying, as well as the author box, tags, next/prev articles and bottom sharing
– https://www.screencast.com/t/jZLFEJXDO
I could give you a quick fix to further overwrite this code, but it would be better to remove it. Please check all the theme panel Custom code sections and remove it if it is present there. Mainly check the Custom HTML and Custom CSS sections.

Thanks

Hi,

It could be possible with some CSS code. For a more accurate solution please provide a link to your website, we will try to give you a solution.

Thanks