Hope everyone doing well!
I am making a site in WordPress through Elementor plugin. I am facing a weird issue on the button. Button has line break <br>, even I didn't add it there.
But on the other hand, the button is showing alright in Elementor dashboard, but when I do a live preview, button messed up.
I tried to deactivate all plugins and themes, but it didn't work. Need Help!
You have to assign a custom class tag to the button element, it most likely would be assigned to the div .elementor-button-wrapper, you’ll have to check it with dev tools, then you need to access the theme style on appearance/editor. So you could add the following code:
.class-used br{
display:none;
}
In case the class you assigned to the button is not in a parent tag on top of all you need to eliminate try the same process assigning the class to the column or element that wraps the button. Hope it give you an idea to solve the issue.
button or link padding, width, margin and other style won't work. Because button or link need to add display:inline-block; or display: block; then it will be work. So you need to use that display:inline-block; or display: block;. Hope it helps
Related
I made a transparent menu with white text on it and when we hover it the whole topbar becomes white and the text becomes invisible because of the same color.
I want to change the font colors to black of all the items in the columns when we hover anywhere on the top bar.
I am using elementor.
This is my website:
http://ha123.epizy.com
Please suggest if there is a plugin for this or any code. As a newbie I would be really happy to learn from you guys.
Thanks.
You could solve this using custom CSS code. If you use Elementor Pro, you could put this CSS inside of the plugin somewhere, but if not you can just add it either in the Customizer in Wordpress, or in a custom (child) theme.
Something like this could work in your case:
.elementor-widget-ekit-nav-menu:hover .elementskit-navbar-nav > li > a {
color: black;
}
You might actually also be able to solve this using Elementor itself in the style settings somewhere, but that depends on how everything is set up and which elements you are using.
I'm using Ng-Zorro for template styling and am currently implementing an date picker, which I would like to have sitting flush with the dropdown menu above it.
I'd like to manually adjust the width of the date-picker within the template, but I'm seeing this link saying that the width cannot be adjusted...
Trying out html in-line styling did not do anything, so now I'm curious if anyone has been able to readjust the width of the nz-date-picker with Ng-Zorro.
May be you need to set the <nz-date-picker> display:block first
then set the span class="ant-calendar-picker" width:100%
hope this could help u.
Adding the following should work to your component's styling should work for you. The additional styling mentioned in the other response is not necessary for me.
nz-date-picker {
display: block;
}
Hey guys I am new to wordpress and have this task of getting green button to blue. So I found this button but its in anchor tag in class menu-separator is there any way that I can type custom css to make color blue.
right now I have this
.menu-separator .button{background-color: blue !important;}
Wont work because a is missing.
First off you put
.button
You need
a button
Also you cloud use this
<buttton style="background-color: green;">blah blah</button>
Though obviously you'll want to use CSS but just to test to make sure the problem isn't coming from somewhere else try that as well if the whole buttoninstead of .button doesn't work
Also we can't see all your code so this makes it a little harder to help because I don't know how nested the button is.
I have this accordion built using only HTML and CSS but whenever one of the tabs on the accordion is clicked the page will jump so that the tab is at the top of the page.
Example:
<div id="tab-1">502-831
I'e looked around online and have tried a few solution such as JavaScript and onlick solutions but either the solution does nothing or causes the tab to stop functioning. I am using Joomla so there isn't much support for JavaScript. Here is the bare bones code for the accordion on jsfiddle, if you watch the scroll bar on the right when you click the accordion tab you will see it jump.
http://jsfiddle.net/1pjudu4j/4/
I added this line code of CSS to your example and it worked as intended.
.accordion div:blur .content {
display: none;
}
Do play around with your CSS with this in mind.
Please do note, you are not using JavaScript at all for this, therefore this has been posted in the wrong section. Please edit it and remove the "javascript" and "jquery" tags.
Since you are using Joomla, replace:
502-831
with:
502-831
I need your help.
The Title in the green Box "News" appears right under this Link.
http://www.mjart.ch/category/news/
But because of this weird Template I'm using, there are sometimes some imperfections. On this Site here
http://www.mjart.ch/portfolio/
the Green title seems to disappear behind the padding border. I really don't know why.
What I found out is that there are 2 different CSS styles. The first one that works is a .blog-title and the second one is a .single-title. But both are same styled. I would be happy about some help.
Hi if you dont want to change the structure of the template you can add this css rules
.page-id-21 .single-page{
margin:0;
}
.page-id-21 .single-page .single-content{
margin-left: 25px;
}
I added a .page-id-21 class, otherwise in the contact page you will add a margin.
This can be a solution, another is to search the correct template page, if it's a premium plugin it will have it, and you dont need to add the css rules.