simona6

.color-top-border-pink-green:before { background: linear-gradient(to right,#e0218a 17.85%,#bff010 53.28%,#96BD0C 100%); content: ""; height: 4px; width: 100%; display: block; } I'm trying to apply this gradient border at the top of a row. It works if the background is coloured or even if it has a Gradient Colour set in the row options. But it will not work if there is a background image assigned. I assumed that as a "before", it would simply place this literally, before the row, so it appears as a top border. I tried it on a row that has a background image set to contain, and to the right. And applied it "after", and it added it, but only up to the point where the background image began. Any ideas? Simon

Brilliant. Thank you. That's got it.

No that doesn't do anything. . Causes the field to be "normal" and selectable. <script type="text/javascript"> (function( $ ) { 'use strict'; $(document).ready( function(){ var $option = $('option:equals("America")'); $option.attr('disabled',true); }); })(jQuery) </script>

0 <select> <option value="America">America</option> <option value="North America">North America</option> </select> We have an issue where in WP Forms we have a list of countries or regions, and we want to be able to disable any given one as a Parent, such as disabling "America" in the form above. IE. Europe, Great Britain, Spain. We'd like to disable Europe form being selected. <script type="text/javascript"> (function( $ ) { 'use strict'; $(document).ready( function(){ var $option = $('option:contains("America")'); $option.attr('disabled',true); }); })(jQuery) </script> I tried this, as I found it online, but the issue is that for North America, this tool will be disabled as the option "contains" America. Is there a different "contains" term to use, that means this "specifically and only" in the field....?

Ahh it looks like it might be as simple as bottom padding....

Here's a great example. I changed the 'boundaries' letter to a 'p' instead of a 'd' to show you. The issue seems to be only even on the final line, as it sort of "cuts it off". I think it is because I am using the gradient CSS. .ripple { background: -webkit-linear-gradient(0deg,#7521ff 20%,#33b6f1 50%,#b8ff21 80%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } If I take that off, and make it white, it all shows. Any ideas?

They are. But the bottom one, when you bring up the line height, to close it up... the 'g' is cut off as you can see.

First photo - this is "close in", so it is tighter together, and looks better, but check out the bottom of 'g' in Design. The second photo is how much line height I have to add, so it doesn't do it - but doesn't look as good. So I am looking for a way around this. Doesn't happen quite as much if there is no gradient, but it still can. Specially on a phone.

That's the issue. If I set the line-height, it has to go almost stupid high to fit all the letter in... hence, it also add vast space top and bottom. The is the problen.

We are using a font called Coolvetica. A wonderful Helvetica like font, but it has an enormous lineheight when the font is large, around 80px+. On some cases it's fine, and the text will close in over each other, but sometimes, such as with transparency to create a gradient background, you have to increase lineheight to see all the text, with tails, such as p and and g. Is there a way to fake the line height, but 'close in' the gap it creates?

We have a really weird issue, where even Google cannot give me a straight answer. We have GA setup on a site, and it's doing well. But I want to see, of the traffic yesterday, or perhaps this morning, what search terms led someone to us. So let's say we just had a call from a new client and they found us on Google. Organically!! (not Ads). How do I go into GA and pull up a screen that shows this user used term "xxx xxx" in Google? Simon

so in CSS, you can only affect what area you are clicking on, or what comes after. NOT before....? Never knew that.

So if for example you had this: <div class="one">hello 1</div> <div class="two">hello 2</div> <a class="hover">hover here</a> You cannot hover over the <a> tag and change any design feature of "one" or "two". as the <a> tag came after it? REALLY???

So if the columns in the Page Builder each have a Class name, and you hover Class ".col1", you cannot make col2 and col3''s opacity change in CSS? I'm able to do Col2 and col3 if I hover over Col1. But what it won't do, is affect any column to the left of the one you are hover. Col2 hover : Works on Col3, but not Col1. Col3 hover : Does not work on 1 or 2. Also, I want to change the background image of the parent DIV hovering over col1, (and 2/3) but I cannot make it do that either/ I've tried this: .bg-row .grve-background-wrapper { background-image: url("/wp-content/uploads/2022/06/filename.jpg"); background-size: cover; } .col1:hover .bg-row .grve-background-wrapper { background-image: url("/wp-content/uploads/2022/11/filename2.jpg"); } .bg-row:hover ~ .bg-row .grve-background-wrapper { background-image: url("/wp-content/uploads/2022/11/filename2.jpg"); } I just assumed you could say: col:hover ... affect Col2 and Col 3 opacity. Simple.

We have been asked to setup a page with three columns. When you hover over one, the other two disappear (opacity). I can do it so it hides one, but not both. So if you hover over the middle the side two disappear. How do you do it? I also want to change the background image when said DIV is hoverred (bad design, but it's what they want). .col1:hover .col2 { opacity: 0; } .col1:hover .col3 { opacity: 0; } .col2:hover ~ .col1 { opacity: 0!important; } .col2:hover ~ .col3 { opacity: 0!important; } .col3:hover ~ .col1 { opacity: 0!important; } .col3:hover ~ .col2 { opacity: 0!important; }

We have come across a problem, that is solved on many other websites. Let's say you have a shop website, with Mens, Womens, Housing... and so on. On Desktop you hover over Mens and up comes the menu. But on Tablet, you tap on Mens and up comes the menu. But in WordPress this doesn't happen. when you Tap Mens it goes to the Mens page. Is there a simple JS or Functions.php that can be added, so that the 'first tap' simply expands the menu, and a second tap opens the page. Great examples are these: https://www.johnlewis.com https://www.houseoffraser.co.uk Both have main menus, and the dropdowns work. and only open their parent pages on the SECOND tap. You might select Mens or Womens, and the dropdown menu appears. When you select Mens again, it goes to the 'Mens' page. How do you achieve this in WordPress? I found this possible answer: https://www.tbare.com/2014/04/disable-click-on-wordpress-parent-menu-with-children/, but annoyingly, his answer is how to disable it completely, but is it a means to a solution? I want his "Safari on iOS handles SuperFish pretty well – the first tap drops down the menu, and the second tap will actually take you to that page"..... Can his coding be tweaked so that for these parent menu links, they open the page on 'taps'... on only the second tap? Can someone please help, so we can add a script that does it perfectly?

I've to a strange problem with some basic HTML and CSS. I know you can put a <span> inside a <div> and it will show inline, such as using additional classes on inline text. For some reason, ours seems to 'block' to the next line. .grve-title > span { display: inline-block; white-space: nowrap; } With this set, our Spans are going to the next line, but only if the span is long. So if you have a span that is longer than the container, it will wrap. If it is one word, it won't. Any ideas?? If I deselect the display part of this class in Inspection, it doesn't block at all, it just goes to default. I don't however know how to disable this "display: inline-block"?!

thanks. Sadly WP Bakery's free version has no support, but we have the same issue on a paid theme that has good support, so referred it to them. If they get it sorted, i'll post on here how it got working.... if it does.

Why should it be avoided? Shame WP Bakery cannot do it, especially when there is the checkout that it states can do it....

So if I Opted for the method I mentioned..... A row of two columns (text in first). Hide first col on mobile. Add second row, copy that text in there. Hide that row on desktop screens, but show on mobile. Is that acceptable in SEO? I ask as I was always told that hiding *anything* is bad, even if you show and hide depending on media size. Simon

Great - so how do you do it? The other idea is to add another row, with the same text, hide for all devices bar mobile, and them hide the left column on mobile. So when the screen is smaller, one disappears, the other shows. But I thought hiding and showing content is bad for SEO.

https://themenectar.ticksy.com//article/11298/ This is what I am trying to do, but on mine, it fails every time. I do have that RTL checkbox, which I Assumed would just do it.. but no. so I did the class and the CSS but again, no.

So using WP Bakery, can you see how I make it work, as I was told that's all I needed to do. Assign that class to the row. And it should just reverse.

You see "Left" and "Right". In WP Bakery they are two columns. The 'row' has class: home-promo-client-left assigned to it, with the CSS quoted above. I want that CSS to switch it around on a mobile device. So on a mobile, Right goes 'above' Left.

https://www.79design.org.uk/direction/ We are trying to use WP Bakery's tools, and the Flex Direction CSS. @media only screen and (max-width: 1000px) { .home-promo-client-left img, .home-promo-client img { max-width: 92%; margin-left: auto; margin-right: auto; } .home-promo-client-left { margin-right: auto; margin-top: auto; display: flex !important; flex-direction: column-reverse; } } We have this in the page. The image part is for another page, but the column reverse for mobile is being ignored. Any ideas why?