Why won't this remove the underline from the facebook and assassin industries links on this page.
.module_wpproad {
text-decoration:none;
border:none;
}
The default text-decoration attribute of links takes precedence over the text-decoration attribute of the container. You will need to be specific in your override:
.module_wpproad a {
text-decoration: none;
}
Related
Emmet autocomplete doesn't add semicolon after css rules inside media query.
div {
display: none;
}
#media (max-width: 991.98px) {
div {
display: none
}
}
Outside media query
Inside media query
This is a bug in the plug-in which is under investigation. Keep track of it here: https://github.com/emmetio/sublime-text-plugin/issues/173
UPDATE: This has now been fixed.
All my secondary header navigation links can only go (top left, bottom left, top right, etc.).
Currently enabled as "top left", however I want two out of those four links to be "top right".
Current code works perfect, other than after the 75% resizing mark, the links discombobulate.
#media screen and (min-width: 800px)
{
a[href="/terms-of-use"]
{
position:absolute;
right:120px;
}
a[href="/privacy"]
{
position:absolute;
right:200px;
}
}
It has been said that using absolute positioning within flex-box will not work reliably. I'm going to guess that, because I was viewing your site in Firefox and Chrome and did not see the issue, that you are viewing your site in Safari, where the issue can be seen.
In any case, due to the above, I would recommend using Javascript in order to move the navigation items to the desired location. Then, add some additional CSS in order to get those newly-moved items to look like the others.
First, remove the CSS you've added that addresses those navigation items.
Then add this via site-wide Footer code injection:
<script>
(function() {
var targetLinks = document.querySelectorAll(".Header a[href='/terms-of-use'], .Header a[href='/privacy']");
var targetParent = document.querySelector(".Header-inner [data-nc-container='top-right']");
var i;
for (i=0; i<targetLinks.length; i++) {
targetParent.appendChild(targetLinks[i]);
}
})();
</script>
And finally, add this via the CSS Editor:
body:not(.tweak-header-secondary-nav-hover-style-button):not(.tweak-header-secondary-nav-inherit-styles) [data-nc-container='top-right'] .Header-nav-item {
margin: 0 .618em;
padding: .618em 0;
font-family: myriad-pro;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
[data-nc-base="header"] [data-nc-container="top-right"] [data-nc-element="cart"] {
padding-left: 33px;
}
[data-nc-container='top-left'] [href='/privacy'] {
display: none;
}
[data-nc-container='top-left'] [href='/terms-of-use'] {
display: none;
}
How do I make the ion-menu-button (hamburger menu button) larger?
The ion-menu-button component creates an ion-icon with font-size set to 26px. There is no attribute to set size and CSS seems to have no impact.
[UPDATE]
I reported this as a bug to the Ionic team and they "fixed" it here: https://github.com/ionic-team/ionic/issues/18667 although i still don't see how to modify the size.
setting:
ion-icon {
--font-size: 100px !important;
font-size: 70px;
}
does nothing
Sorted it out on my own. There was a
.sc-ion-buttons-md-h {
display: flew;
}
wrapper that was limiting the size of the button. Once i removed that:
.sc-ion-buttons-md-h {
display: block !important;
}
and used ion-grid to place button on the left side of my header, i could then use:
ion-menu-button {
font-size: 50px !important;
}
to set the size of my menu button.
I've come across many ways to solve this using Font Awesome < 5, but I can't seem to solve this in any way using Font Awesome 5.
This is how many resources point to adding a Font Awesome icon in placeholder text.
<input style="font-family:FontAwesome !important" type="text" placeholder="">
Remember to not use the general "Font Awesome 5" font family, you need to specifically end with the branch of icons you're working with. Here i am working the "Brands" category.
<input style="font-family:'Font Awesome 5 Brands' !important" type="text" placeholder="">
For a more sophisticated solution you could implement a class that works specifically on the placeholder text of a class like this and add that class to you input. Useful if you want a different font-family on your input values.
.useFontAwesomeFamily::-webkit-input-placeholder { /* WebKit, Blink, Edge */
font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily::-moz-placeholder { /* Mozilla Firefox 19+ */
font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily:-ms-input-placeholder { /* Internet Explorer 10-11 */
font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily::-ms-input-placeholder { /* Microsoft Edge */
font-family: "Font Awesome 5 Brands" !important;
}
.useFontAwesomeFamily::placeholder { /* Most modern browsers */
font-family: "Font Awesome 5 Brands" !important;
}
And then add this class to your tag.
<input class="useFontAwesomeFamily" type="text" placeholder="">
This might help someone out there as I had the same issue.
The Branch for Regular icons is Font Awesome 5 Free. However, if you need to use solid icons, just add the font-weight: 900; property to the inline CSS.
<style="font-family: Circular, 'Font Awesome 5 Free' !important; font-weight: 900;">
The placeholder text will be bold, I'm still trying to find a solution for this, I don't know if there's another way but it works for me for now.
I hope it helps.
You can also the fas class to the input.
Just bear in mind that this solution and any font-awesome style changing solutions will also change the style of any text preceding or following the unicode icon.
Remember to add class "fas fa-search" to the input
I have...
body { text-transform: uppercase; }
...and...
textarea { text-transform: none !important; }
Text pasted into a textarea in Webkit (Safari and Chrome) will get capitalized.
Text pasted into a textarea in Firefox or IE will be left as it was, lower or capped.
I need it to be left alone in all browsers for SQL.
Bug? Fixes?
You're likely to have a single element wrapping all content or perhaps a small number of them. I've found that the top-most element having text-transform: uppercase does not cause pasted text in WebKit to become upper case.
E.g. instead of:
body { text-transform: uppercase; … }
Use:
body { … }
#header, #content {text-transform: uppercase}