Search Results for 'css'

Hi,

But if you shift the menu to the right what about the search icon? Maybe like this

– https://forum.tagdiv.com/topic/how-to-change-mobile-icon-menu-to-the-right/

Or maybe switch them? – https://www.screencast.com/t/EWt7fDFfEWc

#td-top-mobile-toggle {
position: absolute;
right: 0;
}
.header-search-wrap {
right: auto;
}

Also with the menu to the right as you mention
– https://www.screencast.com/t/Iqp57AJP

#td-top-mobile-toggle {
position: absolute;
right: 0;
}
.header-search-wrap {
right: auto;
}
.td-main-menu-logo img {
left: auto;
right: 54px;
}

Modify the codes as you want, then enter them in the phones section in the Advanced CSS.

Thanks

Hi bob,

You should use the code below and place it in Theme panel -> Custom CSS area if you want to change the color line.

.block-title {
border-color: red!important;
}

Thanks for your understanding!

Hi,

@mercure961 Something like this will do it for the authors box
– https://www.screencast.com/t/Q0btWsJUslI
It will apply to all the authors boxes once entered in the theme panel custom CSS code section. This is the code used

.td_block_authors .td-author-post-count {
display: none;
}

Thanks

Hi,

You can align the base currency left by using this css code:

.td_block_exchange .td-exchange-header{
text-align:left;
}
.td_block_exchange .td-column-1 .td-exchange-base{
margin-left:0;
}
You can add the code in the theme panel under custom css.

Unfortunately there is no way to have description as the base currency for all the exchange rates.

Thanks

Hello geny80,

Try to use the code below and place it in Theme panel -> Custom CSS area.

The code is ->

.td-next-prev-wrap a {
width: 35px;
height: 35px;
line-height: 35px;
border: 1px solid #000;
color: #000;
}

Thanks for the message!

Now the website is fixed – http://prntscr.com/kqg6vy

The thumbnail is still the same incorrect. it should be like this
– https://www.screencast.com/t/XVlB9oCzqUJ7
In your case a thumbnail is still not created properly for some reason
– https://www.screencast.com/t/zAirKd7Z5lPA

What is unusual is that the other thumbnails are created as they should, only this one has the problem.
Did it happen before when a different post was displayed in the block? What happens if you add the same block in a new page, does it look alright?

I could give you a code as a quick fix – https://www.screencast.com/t/eKRDo10Dfb6
Enter it in the theme panel custom CSS section

@media (min-width: 767px) {
.td_block_25 .td_module_mx17 img {
height: 455px;
}}

Hi,

I know what you are referring to, but there would be nothing to do about that with a theme setting. The thumbnail used is bigger than what is visible, it is the same thumbnail as on desktop but reduced a little
– https://www.screencast.com/t/w2pG0RG39g
– https://www.screencast.com/t/tsf8MZmVAV9
So while the module is limited to a fixed value on mobile, the image will be larger. That creates the effect you mention when clicking on it.

I could give you some CSS solutions if this is required in this case. One would be to make the modules as big as the thumb on mobile
– https://www.screencast.com/t/trzr5LLz3t
For this, enter the code in here – https://www.screencast.com/t/4v5HtCAN

.td_block_big_grid_6 .td-big-grid-post-0 .td-module-thumb, .td_block_big_grid_6 .td-big-grid-post-1 .td-module-thumb {
height: 356px;
}

Thanks

Hi,

That would not be possible, unless maybe with custom CSS. But it would depend where this sidebar is, in a page, post etc.
Hiding it would be possible, but also it will require some adapting for the remaining content with no sidebar. I could give it try, provide a link to where you want to do this. Mention if it should work only for that page.

A general setting to remove a sidebar by the device used to view the website does not exist.
In a page for example elements, rows, columns, can be hidden per viewport
– https://www.screencast.com/t/Cgew8aYUpP
– https://www.screencast.com/t/yDtjHwIK2
This works in pages or cloud templates built with the composer.

Thanks

Hello wpnewb,

You should provide your website URL so I can try to provide a CSS code for this.

Thanks for your understanding!

Hi,

Try to use the code below and place it in Theme panel -> Custom CSS area.

.td-grid-style-2 .td-meta-info-container {
top: 20%!important;
text-align: center;
}

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

Thanks for the message!

hello,
The theme on mobile devices provides a left and right padding.
You can alter this behavior by using this css code in the theme panel-> custom css section:

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

Thank you!

Hi,

The image you can set is not per viewport. But there would be one way of doing it if required.
Create four single image elements in the page, instead of one. Then using the “Display” hidden setting in the CSS tab (this is per viewport) hide each one per the device you want
– https://www.screencast.com/t/53mrmljg
For example hiding the image in all these viewports will make it visible only on mobile
– https://www.screencast.com/t/BSRQpbSZz
This could be a solution if you should consider it and try it.

Thanks

Hi,

I see you use mostly flex blocks. Be sure to take into account when building the page, the mobile variant. For example while using four module per row in a flex block is fine on desktop
– https://www.screencast.com/t/clc9Uo96DDy
On mobile that will not look nice – https://www.screencast.com/t/ZC9Xzsisq11A
So while the mobile view is selected, choose for example one module per row
– https://www.screencast.com/t/O6GIVj28
Then on desktop there will be four modules per row, while on mobile there will be one.

Also the CSS tab margins padding etc are per device if you use them
– https://www.screencast.com/t/Zii5FqnV

If you use custom CSS use it per device – https://www.screencast.com/t/ndmigIDX

It depends on how you build the page, that will directly affect the mobile result as well. That will be the case with flex blocks. Th predefined blocks will always be automatically responsive, but the flex blocks will require more care when used.

Thanks

Hi,

The image is set as background, so you could use background position
– https://www.w3schools.com/cssref/pr_background-position.asp
– https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

This is an example where the image will have a space of 50px to the left
– https://www.screencast.com/t/ORMzR5Mym
A no repeat would also be necessary so the image will not repeat itself in the crated space.
Code used in example, it will affect all the image boxes if not made more precise

.td_block_image_box .td-custom-image a {
background-position: 50px 0px;
background-repeat: no-repeat;
}

In the advanced CSS sections you can enter it according to what is needed. For example in the phones section to make it apply only on phones.

If I misunderstand something please correct me.
Thanks

Hi,

The more stories font is altered from the font of the module used on that section. If for example you have module 6 here: https://www.screencast.com/t/uqJ0UdopmOm you can change the font from here: https://www.screencast.com/t/7YzXFVELxco4
You have to use the modules, not the particular blocks. A block is made out of 1 or more modules: https://forum.tagdiv.com/theme-blocks-modules/
Mobile fonts cannot be changed. Sorry. It can only be done with custom css. The theme offers no font customization for mobile devices.

Thanks