Search Results for 'flex'

Glad you sorted out some of the problems.

Besides installing the mobile theme plugin there would be no other solution to speed up the website on mobile.
The same page content will be loaded on mobile if the plugin is inactive, so using an average or low internet connection speed it will take more time to load everything
– https://www.screencast.com/t/3FdXZdxYPM

Also I see that there could be a problem with the thumbnails. Try to regenerate them with the plugin mentioned in this guide
– https://forum.tagdiv.com/thumbnails-fix-strange-looking-images-on-blocks/
Then edit the homepage and check what image sizes are used by the flex blocks
– https://www.screencast.com/t/eH79VV7j2
Use a lower or the lowest image size defined there. No point in loading big images for small modules. That should reduce the page size.

The analytics code for AMP has to be of this form in order for it to work properly
– https://www.screencast.com/t/vJ78X7rUL
There is a tooltip when the question mark is hovered.

Hi,

Yes, you understand correctly, that is a custom made for our blog; you can create it with posts loop, or with flex block.

Thanks you for your understanding.

Hi,

These would be the styles available for big grids
– https://demo.tagdiv.com/newspaper/big-grid-1/
I believe you are referring to style 6 (lightsky) which uses a background color with opacity over the images, also a rollover effect.

I tested with a mac and Safari browser, the lightsky effect seems to work same as in Chrome or Firefox. I believe the mac uses High Sierra OS and latest Safari that comes with it.

If you don’t want a lightsky effect and opacity maybe consider to use a flex grid, Flex grid 2 is similar to big grid 1
– http://prntscr.com/lj3rb6
You can center the post meta, and the result is the same as big grid style 6, with no opacity and lightsky.

Thanks

Hi,

Please add the below css in Custom css
https://www.screencast.com/t/ZlmbgvrrJM

.td-post-title .td-module-meta-info {
display: inline-flex;
}
.td-post-title .td-module-meta-info .td-post-author-name{
margin: 18px 0 0 10px;
}
.td-post-title .td-module-meta-info .td-post-date {
top: 21px;
}

Thanks.

Hi bdeepu,

If you want this on homepage you can use tagDiv Composer and set a block that is full https://www.screencast.com/t/VYHTEpfSKgae , or you can use flex block 1 set one post and layout module per row 1 and meta info horiz align to center https://www.screencast.com/t/sRYNWBW6XHN8

If you want to achieve this on post you can use a cloud template from tagDiv Cloud Library.

Hope this will help you.
Thanks.

Hi,

You can make the elements inside the page have a higher width or full width, not the actual page as a whole.
For example you can stretch the rows used in the page
– https://www.screencast.com/t/RmCEWTPmqOB
Then you could use flex blocks in the page, flex grids or full width grids.
There are 10 types of full width big grids – https://demo.tagdiv.com/newspaper/full-big-grid-1/

Through the cloud library you can import blocks designed by us based on flex blocks, preview and even edit them here
– https://affiliate.tagdiv.com/#/load/Blocks

Please let us know if you have more questions.
Thanks

Hi,

So just text as in the post titles and meta? The problem is just with flex grids? What if you place a default grid, or flex block? Try in a different page as well. Let us know what you find.

Thanks

Hi,

Please provide a link were I can inspect the problem.
Or you can use flex block and set different layout in function of device (but you need to deactivate mobile theme)

On desktop: https://www.screencast.com/t/6HKNJjl35i
On mobile: https://www.screencast.com/t/Ik42eacS3DgK

Thank you for your understanding.

Hi uitdezaanstreek,

Unfortunately this option is only for the categories will not be apply in blocks.

If you chose to use flex block, in Style you can change the background color for category tag, but will change for all
https://www.screencast.com/t/ieAQgdTxJQ3O
https://www.screencast.com/t/1jwnretdY4y

Thank you for your understanding.

Hi,

From what I can see at the moment the website uses the default WordPress blog page as homepage. That will only display a list of your posts, ordered by latest.

You can create a static page with the composer and set that as homepage
– https://forum.tagdiv.com/homepage-how-to-build-and-set-it/
In that page you can place any elements you want from the tagDiv composer, grids, blocks etc.
Also you can use block designs made by us (based on flex blocks), from the cloud library
– https://forum.tagdiv.com/tagdiv-cloud-library-plugin/
Here you can see how they look, preview them and even edit them
– https://affiliate.tagdiv.com/#/load/Blocks
Import the ones you like in the pages you create
– https://www.screencast.com/t/fz0yfnvC

Flex blocks have an option to set dividers between modules, so that won’t be a problem
– https://www.screencast.com/t/fz0yfnvC

Please let us know if you have more questions.
Thanks

Hi,

1. What kind of ads are you using? I could take a look, post a link to the website.

2. I could take a look here as well, ads for AMP have to be entered in the Theme panel AMP section. For Adsense ads you have to enter these parameters
– https://support.google.com/adsense/answer/7183212?hl=en
– https://www.screencast.com/t/rBr4FTlcH5X
Simple HTML ads can be entered in the dedicated section
– https://www.screencast.com/t/W3d2qwNJhS
Be sure to test with a mobile or mobile editor to see if the ads appear.

3. That happens because the mobile theme plugin is active. This plugin is optional, it is intended to be used if you want to display a simpler and also different content on mobile.
You have to create 2 versions for each page, one with the composer for example as you did for that page, and one with the simple mobile editor
– https://www.screencast.com/t/vSh8aLuBzjgT
As I said the plugin is optional, so if you want to display the same content from desktop on mobile, deactivate it. More info about the mobile theme here
– https://forum.tagdiv.com/the-mobile-theme/

4. Some header styles display the header ad below the menu and logo for example
– https://forum.tagdiv.com/header-styles/
There are also plans to introduce a header builder in coming updates, this will add a considerable amount of flexibility concerning the header section.

Thanks

Hi,

Predefined blocks (blocks 1->25) don’t have settings to chnage the color of the article titles. Only flex blocks do at the moment
– https://www.screencast.com/t/4kfay9RLiV

I could give you a code that will work only on the homepage and change the color of the titles for the elements you have in it
– https://www.screencast.com/t/HqQ4FIC9o
You can chnage the color if you want, in the code. Then enter the code in the Theme panel->Custom CSS code section.

.home .td-ss-main-content h3 > a,
.home .td_block_1 h3 > a {
color: white;
}

Let me know if you have more questions or need help with something else.
Thanks

Hi,

Please replace the above css with this one:
.td-header-style-4 #td-header-menu ul.sf-menu > .td-menu-item > a {
word-break: break-word;
max-width: 142px;
min-height: 78px;
line-height: 20px;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
}
.td-header-style-4 #td-header-menu .td-icon-menu-down {
display: none;
}
.td-header-style-4 #td-header-menu {
width: 1024px;
margin: 0px auto;
display: table;
}

Thanks.

Like this seems to work better – http://prntscr.com/lfrzhk

.td_flex_block_2 .td_module_flex_2 .td-module-container:hover:after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(196,95,10,0.9);
}

You could now add a transition to this code, I believe that is how the website you mention does it. Here is a guide
– https://css-tricks.com/almanac/properties/t/transition/

Hi,

If you are using header style 4 please replace the above custom css with this one
.td-header-style-4 #td-header-menu ul.sf-menu > .td-menu-item > a {
word-break: break-word;
max-width: 142px;
min-height: 78px;
line-height: 20px;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
}
.td-header-style-4 #td-header-menu .td-icon-menu-down {
display: none;
}
.td-header-style-4 #td-header-menu ul{
margin: 0px auto;
display: table;
}
.td-header-style-4 #td-header-menu img,
.td-header-style-4 .header-search-wrap .td-search-btns-wrap{
margin-top: 15px;
}

Hope this will help you.

Thanks.

Hi,

There is an option to set a color overlay for the flex module images
– https://www.screencast.com/t/xQ8QzghEt3
That will be always on when set. To achieve the same but on hover you could use some CSS. Like this for example – https://www.screencast.com/t/vB7qpmK2zfL
When the module is hovered a gradient color will appear over it, you can modify the colors and values as needed, this is the code used in the example
– https://pastebin.com/MEq8gB8h

If I misunderstood what you are referring to, please correct me.
Thanks

Hi,

That isn’t actually wrapping around the image, the excerpt is displayed underneath the thumbnail and title.
From what I can see there is no block that displays the could do that. Even the many flex block examples designed by our theme don’t have a design like that currently
– https://affiliate.tagdiv.com/#/load/Blocks
Maybe it is possible, I will add a design suggestion for a block/module like you mention. Sorry for any inconvenience.

Thanks