- NewspaperWP Rocket and Newspaper Theme: Optimization Guide
- TutorialsFrom WPBakery to tagDiv Composer
- TutorialsDefault Block Settings Guide
- TutorialsHow to use custom fonts
Hi,
We are almost finishing our site ready to go live, however, we are having some problems with the mobile version.
There are some sidebar widgets not showing up.
Examples
https://thepanafrican.net/recipe-submission/
I have tried AMP settings in many ways and now deactivated trying to find the issue but I cannot seem to find it.
Usually, the issue is happening when using CSS for some forms. Would appreciate any suggestions to fix the mobile site, as well as some tips on editing the header for mobile.
Regards.
I have the template working on the following website:
https://periodico.lebaconsulting.es/
The footer and sidebar breaks in the pages related to post like https://periodico.lebaconsulting.es/category/espana/ or https://periodico.lebaconsulting.es/andalucia-acogera-el-primer-congreso-de-cruceros-inteligentes/ however it works well in pages like https://periodico.lebaconsulting.es/ or https://periodico.lebaconsulting.es/espana/
I think it has something to do with css but I don’t see the problem.
Hi,
There is another way, but this require some extra css, to set a specific color for each category, if is so, then you can use a custom css like this one -> https://i.imgur.com/MaKeGZg.jpg
.td-module-image a[href$="/music/"], .td-meta-info-container a[href$="/music/"], .td-module-container a[href$="/music/"], .single .td-category a[href$="/music/"], .tdb_single_categories a[href$="/music/"] {
background-color: green;
}
.td-module-image a[href$="/architecture/"], .td-meta-info-container a[href$="/architecture/"], .td-module-container a[href$="/architecture/"], .single .td-category a[href$="/architecture/"], .tdb_single_categories a[href$="/architecture/"] {
background-color: red;
}
All you need to do is to change the category in code and the background color will apply on that category.
Set the custom css in Newspaper>Theme panel>Custom code>Custom css
Thank you!
Hi,
You can try this custom css -> https://i.imgur.com/J9bdokq.jpg
.menu-item-1269 > .sub-menu{
-moz-column-count: 5;
-webkit-column-count: 5;
column-count: 5;
}
This code will apply only on that menu item and it need to be set in theme panel> custom code> custom css -> https://i.imgur.com/3EGPWHH.png -> https://i.imgur.com/6lrSvTH.jpg
Also please do not share your privet credentials on forum.
Thank you!
Hi,
Is look that the elementor has a stronger css that is hiding the page/post title, this can be fix using a css like this one -> https://i.imgur.com/HxdAC9q.png
body h1.entry-title {
display: block;
}
Set this code in theme panel > custom code > custom css.
Hope this will help you!
Hi steve@tvstrategies.com, you can set the css in theme panel in custom code> custom css -> https://i.imgur.com/bFrkq9S.png you can set there as many css you want, just make sure that there are no plugins or other options from host that block the theme panel to be save.
Try to set the code there and let me know the results!
not sure what I am doing wrong but flexblock is loading 2 images for the same space.
this is visible on GTmetrix as the waterfall shows both images
the same space will load 485×360 as well as 970×720
page – travellingonpoints.com
example code
<div class="td-module-thumb">
<style>@media (-webkit-max-device-pixel-ratio:2){.td-thumb-css.tdi_57_a49{background-image:url(https://travellingonpoints.com/wp-content/uploads/2020/10/Priority-Pass-Person-Holding-Phone-970x720.jpg)}}</style>
<span data-bg="https://travellingonpoints.com/wp-content/uploads/2020/10/Priority-Pass-Person-Holding-Phone-485x360.jpg" class="entry-thumb td-thumb-css tdi_57_a49 rocket-lazyload" style=""></span></div> </div>
So just wanted to see if this is a bug or is it just me
so on my website
1. The Css hidden function on Tag div composure when on mobile-only page (the new one) doesn’t actually work when in the Ipad mode – ie. when changing an element from show to hidden it does not do anything – this will work in mobile mode just not ipad mode
2. when using the mobile theme (ie the reduced theme size for AMP or Mobile) the theme does not use a reduced thumb size (ie the recommended “265×198” and the “741×486”). when testing on Chome and lighthouse speed test on developer mode, the image used is the uploaded image without reduction.
Hi – Thanks for the quick reply. Your suggestion did not work. I want to be able to set up a row of images, as Block 16 does (like this screen shot), with the titles below the images. So when I click each image, it goes to a URL that I define (for example, to a page on a different Web site). Your example looks like it should work fine, but it did not.
Instead, I still get this (See this screen shot). I entered the CSS that you gave me, into the Theme Panel Custom CSS (See screen shot), but it shows the resulting layout with the titles still inside the images. Could I have done something wrong?
Thank you
Hi – You gave me instructions (above) to suppress the display of advertising on Post pages. This worked OK when I only had one ad on a page. But now, I have multiple ads (see screen shot 1).
How can I suppress inline ads and bottom ads? (see screen shot 2)
A second problem:
LiveCSS is no longer saving my custom CSS (are there too many CSS items?) See screen shot 3. When I click the blue “save” button in the lower left corner, an arrow keeps spinning and it does not save). Should I directly edit the WordPress file that LiveCSS edits instead? Where is that file – in the WordPress > WPcontent directory?
Hi,
Indeed some of that code it is from the theme, unfortunately the only way to remove it is from theme files, most of theme are set using minify css.
Unfortunately even if you remove them from the theme after a theme update the code will be set back.
I know that there were some plugins that can remove un use code to be load in theme, unfortunately I can not remember the name of that plugin.
Thank you for your understanding!
Hi Diana, this can be made only with custom css. Did you want to do this for all image info box that you have or only for few?
Please provide ma a link and let me know the image info box that you want to make circle and I will provide a css.
Thank you!
Hello !
Please try this css code: .postid-88373 .td-a-rec-id-content_bottom { display: none; }
The code must be inserted here: https://www.screencast.com/t/J1Nxw5s5
Thank you !
Hello !
Please try this css code: header .td-post-author-name {
display:none;
}
The code must be inserted here: https://www.screencast.com/t/J1Nxw5s5
Thank you !
Hi,
I think that you are referring to this -> https://i.imgur.com/AMJnxJ3.png this is not from that css, I removed it and the problem persists, also the code is affecting only the frontend.
The categories section is blocked by something else, after some time this is open -> https://i.imgur.com/57rxMUN.png
Here is a quick test -> http://www.filedropper.com/21a447d5-b496-43f3-9b31-9b066e3c3b58
The problem seems to be from some plugins.
Thank you!
Hi Yogesh1,
There is a small problem, the blocks doesn’t have individual options as flex blocks to can remove these elements only for that block. Therefore you have two possibilities, use the block 9 and a custom css to remove these elements or use a flex block and adjust it, also you can import a flex block that already has a similar layout from cloud -> https://i.imgur.com/ddYX3fu.png -> https://i.imgur.com/UubqdGA.png -> https://i.imgur.com/LNzak9d.png -> https://i.imgur.com/UAjZMcm.png
Hope this will help you!
Let me know the rsults!
Hi,
As an work around you can use the Image box with a custom css like this one -> https://i.imgur.com/hg3EMLm.jpg -> https://i.imgur.com/NZGLdka.png
.imgC.td_block_image_box .td-custom-title {
position: relative;
top: 0;
transform: none;
-webkit-transform: none;
}
Set this code in theme panel> custom code> custom css.
Hope it will help you!
Thank you!
Hi,
The width of Newsmag is 1068px width, now you can go for 1116px, but no further.
If you want to use a custom css this will be quit hard, here is a guide for it -> https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
Thank you!
Hi Calin, What is the default width of headers (and pages) in Newsmag? I can’t find any reference in the online documentation.
I have been using images of 1100 x 175 px, but that size seems to be too wide for the theme. I had been using abstract images for this, but now I want to use a sports image and I can’t seem to size it correctly.
Or, what do I say in LiveCSS, to make sure that my images fit to width?
Thank you
Hi,
The problem seems to be from a margin top -> https://i.imgur.com/FE2WLfR.png for this please make sure that you do not have some css in theme panel> custom code> custom css.
Also to fix the problem on all elements you can use this custom css -> https://i.imgur.com/WaZ9m5p.png
.td_module_wrap.td-meta-info-hide .td-module-meta-info {
margin-top: 0px;
}
This code need to be set in theme panel> custom code> custom css
hope it will help you!
Thank you!
After the theme update my side did this ?
What to do?
[tdc_zone type=”tdc_content”][vc_row full_width=”stretch_row_1400 td-stretch-content” gap=”eyJhbGwiOiIyMCIsImxhbmRzY2FwZSI6IjEwIiwicG9ydHJhaXQiOiIxMCIsInBob25lIjoiMCJ9″ tdc_css=”eyJhbGwiOnsibWFyZ2luLXRvcCI6IjQwIiwibWFyZ2luLWxlZnQiOiIwIiwiZGlzcGxheSI6IiJ9LCJsYW5kc2NhcGUiOnsicGFkZGluZy1ib3R0b20iOiI1MCIsImJvcmRlci1jb2xvciI6IiNmZmZmZmYiLCJiYWNrZ3JvdW5kLXN0eWxlIjoiY29udGFpbiIsImRpc3BsYXkiOiJub25lIn0sImxhbmRzY2FwZV9tYXhfd2lkdGgiOjExNDAsImxhbmRzY2FwZV9taW5fd2lkdGgiOjEwMTksInBvcnRyYWl0Ijp7Im1hcmdpbi10b3AiOiIyMCIsInBhZGRpbmctYm90dG9tIjoiNDAiLCJkaXNwbGF5Ijoibm9uZSJ9LCJwb3J0cmFpdF9tYXhfd2lkdGgiOjEwMTgsInBvcnRyYWl0X21pbl93aWR0aCI6NzY4LCJwaG9uZSI6eyJtYXJnaW4tdG9wIjoiMCIsIm1hcmdpbi1yaWdodCI6Ii0yMCIsIm1hcmdpbi1sZWZ0IjoiLTIwIiwicGFkZGluZy1ib3R0b20iOiIzMCIsIndpZHRoIjoiYXV0byIsImRpc3BsYXkiOiJub25lIn0sInBob25lX21heF93aWR0aCI6NzY3fQ==”][vc_column width=”1/3″ tdc_css=”eyJhbGwiOnsicGFkZGluZy10b3AiOiIyMCIsInBhZGRpbmctYm90dG9tIjoiMjAiLCJ3aWR0aCI6IjIyJSIsImJhY2tncm91bmQtY29sb3IiOiIjZjlmOWY5IiwiZGlzcGxheSI6Im5vbmUifSwibGFuZHNjYXBlIjp7ImJvcmRlci1jb2xvciI6IiNmZmZmZmYiLCJ3aWR0aCI6IiUiLCJzaGFkb3ctY29sb3IiOiIjZmZmZmZmIiwiZGlzcGxheSI6Im5vbmUifSwibGFuZHNjYXBlX21heF93aWR0aCI6MTE0MCwibGFuZHNjYXBlX21pbl93aWR0aCI6MTAxOSwicG9ydHJhaXQiOnsiZGlzcGxheSI6Im5vbmUifSwicG9ydHJhaXRfbWF4X3dpZHRoIjoxMDE4LCJwb3J0cmFpdF9taW5fd2lkdGgiOjc2OCwicGhvbmUiOnsid2lkdGgiOiIxMDAlIiwiZGlzcGxheSI6Im5vbmUifSwicGhvbmVfbWF4X3dpZHRoIjo3Njd9″][/vc_column][vc_column width=”1/3″ tdc_css=”eyJhbGwiOnsid2lkdGgiOiI1OSUiLCJkaXNwbGF5Ijoibm9uZSJ9LCJsYW5kc2NhcGUiOnsid2lkdGgiOiI1NSUiLCJzaGFkb3ctY29sb3IiOiIjZmZmZmZmIiwiZGlzcGxheSI6Im5vbmUifSwibGFuZHNjYXBlX21heF93aWR0aCI6MTE0MCwibGFuZHNjYXBlX21pbl93aWR0aCI6MTAxOSwicG9ydHJhaXQiOnsiZGlzcGxheSI6Im5vbmUifSwicG9ydHJhaXRfbWF4X3dpZHRoIjoxMDE4LCJwb3J0cmFpdF9taW5fd2lkdGgiOjc2OCwicGhvbmUiOnsicGFkZGluZy10b3AiOiIyMCIsIndpZHRoIjoiMTAwJSIsImRpc3BsYXkiOiJub25lIn0sInBob25lX21heF93aWR0aCI6NzY3fQ==”][/vc_column][vc_column width=”1/3″ tdc_css=”eyJhbGwiOnsid2lkdGgiOiIxOSUiLCJkaXNwbGF5Ijoibm9uZSJ9LCJsYW5kc2NhcGUiOnsid2lkdGgiOiIyMSUiLCJkaXNwbGF5Ijoibm9uZSJ9LCJsYW5kc2NhcGVfbWF4X3dpZHRoIjoxMTQwLCJsYW5kc2NhcGVfbWluX3dpZHRoIjoxMDE5LCJwb3J0cmFpdCI6eyJkaXNwbGF5Ijoibm9uZSJ9LCJwb3J0cmFpdF9tYXhfd2lkdGgiOjEwMTgsInBvcnRyYWl0X21pbl93aWR0aCI6NzY4LCJwaG9uZSI6eyJ3aWR0aCI6IjEwMCUiLCJkaXNwbGF5Ijoibm9uZSJ9LCJwaG9uZV9tYXhfd2lkdGgiOjc2N30=”][/vc_column][/vc_row][vc_row full_width=”stretch_row_content td-stretch-content” flex_horiz_align=”eyJhbGwiOiJmbGV4LXN0YXJ0IiwibGFuZHNjYXBlIjoic3BhY2UtYmV0d2VlbiJ9″ flex_layout=”eyJhbGwiOiJibG9jayIsImxhbmRzY2FwZSI6ImNvbHVtbiJ9″ flex_vert_align=”eyJhbGwiOiJmbGV4LXN0YXJ0IiwibGFuZHNjYXBlIjoiY2VudGVyIn0=”][vc_column flex_layout=”eyJhbGwiOiJibG9jayIsImxhbmRzY2FwZSI6InJvdyJ9″ tdc_css=”eyJsYW5kc2NhcGUiOnsiYmFja2dyb3VuZC1wb3NpdGlvbiI6ImNlbnRlciBjZW50ZXIiLCJjb250ZW50LWgtYWxpZ24iOiJjb250ZW50LWhvcml6LWNlbnRlciIsImRpc3BsYXkiOiJub25lIn0sImxhbmRzY2FwZV9tYXhfd2lkdGgiOjExNDAsImxhbmRzY2FwZV9taW5fd2lkdGgiOjEwMTksImFsbCI6eyJkaXNwbGF5Ijoibm9uZSJ9LCJwaG9uZSI6eyJkaXNwbGF5Ijoibm9uZSJ9LCJwaG9uZV9tYXhfd2lkdGgiOjc2NywicG9ydHJhaXQiOnsiZGlzcGxheSI6Im5vbmUifSwicG9ydHJhaXRfbWF4X3dpZHRoIjoxMDE4LCJwb3J0cmFpdF9taW5fd2lkdGgiOjc2OH0=” flex_width=”eyJsYW5kc2NhcGUiOiI5MDAiLCJhbGwiOiI5MDAifQ==”][/vc_column][/vc_row]
Hi,
Yes, these options for layout are available only for flex elements, those can not be set on simple blocks or grids.
For the moment the background color from category it will not inherit on entire website, for this you need to use a custom css. Here is a similar topic for this -> https://forum.tagdiv.com/topic/want-to-change-background-colour-for-big-grid-flex-2-category-name/
Also the background color for categories can be set from theme panel per each category -> https://i.imgur.com/1G9TKpO.png -> https://i.imgur.com/rcMr3Aq.png -> https://i.imgur.com/o9phbCq.png
Thank you!
Hi Vlad,
Thanks for your reply. Website is http://www.reisverhalen.info
It’ son the homepage. For example this block: https://imgur.com/D63Ulfm
With these css settings: https://imgur.com/TjPFDvD
Hello, how are you?
Could you provide me a CSS code to remove “bottom article ad” from a specific post, please?
Hello !
Please use this css code: .author-box-wrap .td-social-icon-wrap .td-icon-font {
color: white;
}
.td-author-url a {
color:white;
}
.td-author-name a {
color:white;
}
.td-post-next-prev-content a {
color:white;
}
.author-box-wrap .desc {
color:white;
}
h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
color:white;
}
The code must be inserted here: https://www.screencast.com/t/J1Nxw5s5
Thank you !
