When I create a class and assign it to a visual composer row or column it has no effect

I created a class and assigned it to a visual composer row or column it has no effect.
when the browser reaches 800 px, or less, the row background is supposed to not show. But it does show.

  • Adam Czajczyk
    • Support Gorilla

    Hello admin

    I hope you're well today and thank you for your question!

    If I understand correctly from chats and the note that you put on "devsite.me.......com", that's about the "background streching", right?

    I checked the other pages on the "devsite" to see how those boxes should look like and the one on /wpmudevtest/ page only needs one additional rule added:

    .vc_custom_1549266786937 {
      background-size: 100% 100%;
    }

    This stretches it nicely, the same way as on other pages of the site. However, this will indeed be a bit troublesome solution as those VC classes are dynamic and they will change whenever you make changes to the page.

    I checked the page then and I see that there's still the "background-strech" class added but in its current form it will not work because the entire background is set for a different element - for the "first child" element actually. I'm not sure why is that so but apparently this is how WP Bakery Builder is handling this.

    Therefore, instead of the CSS I shared above you can use this one:

    .background-stretch .vc_column-inner:first-of-type {
      background-size: 100% 100%;
    }

    This should remain intact even if the VC_ classes (those with numbers) change. You can also address other CSS aspects of the background using selector like above, this way you won't have to use those dynamic VC_ classes.

    Best regards,
    Adam

  • admin
    • Site Builder, Child of Zeus

    Hi Adam,

    As always, thanks for your problem solving talent. I see that your solution works perfectly.

    So I have another same kind of issue that I tried to apply your solution to, but it is not working.
    You'll notice that on the test page the VC row that contains the first set of 2 columns (each has the background-stretch applied) has a class applied to it named "row-background" I use this class in a media query (just a couple lines below the background-stretch css) that tells the row not to show its background when screen is 800px or less. The reason for this is that once the columns readjust to full page width on mobile, the row background image looks bad at the R and L edges of the columns. However, the class and css setup do not make the row image disappear.

    I thought that I would solve this by adding the code you gave me, but that does not make it work either.

    Please take a look again at the /wpmudevtest page and my css in the theme to provide a solution.

    BTW.... do you know if I can assign more than one class to the VC row? These rows not only need to have the row-background class, but I also need to assign it to the background-stretch class. I'm not sure how you're supposed to (or if you can) enter multiple classes in the VC row dialogue box.

    Thanks again for your help.

    Earl

  • admin
    • Site Builder, Child of Zeus

    Just noticed something else ....

    I applied the background-stretch class to the row containing the second set of 2-column text (left column says, Count on Us for Quality) and the class is not forcing the row background image to stretch as it does with the columns you fixed. I'm guessing that the css needs to be different for VC rows than what you gave me for VC columns. If so, I'm thinking that will solve the row-background issue too.

  • admin
    • Site Builder, Child of Zeus

    Adam,

    Okay, things have gotten really screwy... all the right column backgrounds are no longer linked from the media library. Plus, css customizations for a newsletter signup form that were working perfectly before are no longer showing properly.

    Is it possible that you or someone else at WPMUdev has altered something that would affect these things?

    Please help! Lot's of work has been undone.

    Thanks, Earl

  • Adam Czajczyk
    • Support Gorilla

    Hello admin

    As for the background not disappearing on mobile.

    I have accessed the site and temporarily restored the test page form trash to test it. I see the .row-background class applied to the row that contains that column and when I go below 800px width the background is actually removed there. Am I missing something or did you manage to deal with this one?

    As for adding multiple classes in VC.

    Yes, you can add multiple classes, simply put multiple class names in "Extra class name field", with with no dots prepended and separated by space:

    I applied the background-stretch class to the row containing the second set of 2-column text (left column says, Count on Us for Quality) and the class is not forcing the row background image to stretch as it does with the columns you fixed.

    Hm... I can't see any background there currently. Although it seems to be added in CSS, the background image doesn't seem to be available/exist - it doesn't load at all even if image URL is accessed directly.

    Would that be what you mean also in your most recent post, that images are "no longer linked" from Media Library? I'm asking because I'm not sure if I should check both these issues "as one" or is it something different here that should be check separately...

    Okay, things have gotten really screwy... all the right column backgrounds are no longer linked from the media library. Plus, css customizations for a newsletter signup form that were working perfectly before are no longer showing properly.

    Is it possible that you or someone else at WPMUdev has altered something that would affect these things?

    I can see that my colleague Kris was accessing the site so I asked him and he confirmed that he worked with you during the live chat so if it was fine during that chat and after that, I think something else must have happened as nobody else was accessing the site until now (and now it was me, the only change made was "un-trashing" and then trashing again the test page).

    That being said, after talking to Kris, have you been chatting with any other WPMU DEV staff or were there some other changes related to that made on site? Kris mentioned something also about you getting in touch with your host so were they by any chance doing anything on site too?

    Best regards,
    Adam

  • admin
    • Site Builder, Child of Zeus

    Hi Adam,

    Thanks for your thorough response. Lots of stuff discussed. Most of my issues were resolved in my chat with Kris. But one issue remains, which does not seem to jive with your observations. My objective is to make the ROW background disappear, but when you reduce browser below 800 px. the row background is still visible.

    You may not be aware of what to look for. To clarify, when you reduce to 800px, notice how the extreme outside edges next to the column angular column backgrounds are the sandy color of the text backgrounds; and at the top and bottom of those sandy areas, you see the plum border color. That narrow sandy area with the plum top and bottom borders at the outside edges is the row background.

    Please check again. I have made sure that the access is turned on in the WPMU support page in the site dashboard.

    Thanks,

    Earl

  • Adam Czajczyk
    • Support Gorilla

    Hi admin

    Thanks for explanation. You're right, I wasn't looking into the right place. I think I understand that now.

    The thing here seems to be that whatever you try to do there with CSS it's gets "overpowered" by the "original" CSS becuase a) it's applied to a different class - the one automatically generated by VC, which is also listed "later" in "class" attribute value b) original CSS is also using !important.

    Using a "stronger selector" seems to be solving it. This code added via browser to the "custom.css" seems to be working as expected so give it a try please (make sure to clear all caches on site though):

    @media only screen and (max-width:800px) {
      div.background-stretch {
        background-image:none!important;
      }
    }

    Best regards,
    Adam

  • admin
    • Site Builder, Child of Zeus

    Hey Adam,

    Am I understanding correctly that the only thing you're asking me to do is to copy the code above into appearance/customize/additional css? If so, that is not working. Does the div need to be added to each row instance on the pages? Or, are the rows already designated as a div?

    Also, I find it curious to see that you have used the background-stretch class for this purpose. That class was created for a totally different purpose. I was using the row-background class to eliminate the row backgrounds when under 800px.

    Can you clarify? Or if all of this is as you intended, it looks like the browser inspection tool you used to test this code, temporarily overwrites the existing code, but it does not take precedence when listed in the custom css for permanent change. Maybe the same thing is happening to the div class as it was without it.

    Your help and insight is appreciated.

    Earl

  • Adam Czajczyk
    • Support Gorilla

    Hi admin

    Thanks for the response and I apologize for the delay.

    The class name in this case is not that relevant as both these classes are assigned to the same row div. But yes, you can replace the background-stretch in the CSS that I shared with the row-background, that should have the same effect.

    That said, I tried to check it again and this time to no success. You're right about that the browser can sometimes apply CSS a bit differently than it would be applied if fetched from the site,

    However that "row background" does seem to be removed now. I still do see some background - but the different one, the "skewed" one only - and that's applied to a different element, while the one with "plum bars" on top and bottom is not being fetched. Am I missing something again (I'm sorry if I do!) or did you manage to make that work then? Let me know, please. If it turns out that I am missing the point again, I'll ask one of my colleagues to take another look as sometimes it just takes a "fresh pair of eyes" to solve the issue much easier :slight_smile:

    Kind regards,
    Adam

  • admin
    • Site Builder, Child of Zeus

    Hi Adam,

    Yes, I believe that the media query is row working and the row background is not displaying under 800px. Thanks.

    But it seems as if fixing one problem creates another. Soooooo.....

    When the row background is not displayed, we see a small sandy-gray slice at the right and left edges (as the column background image does not cover all the way edge to edge). Those slices show the sandy-gray page background color. So I went into the row (on home page only) and added the dark purple as the row background color. Works great, as now the sandy-gray no longer shows at the R and L edges. Yea! Resolved! NOPE.

    Well as you can imagine, saving the row background color causes Visual Composer to generate a new .vc# for the row and because the .background-stretch class still does not work for the rows (like it does for the columns), I have to add the new .vc# to the custom css. In the past, that always worked.

    But now for some reason, adding the .vc# with css settings to the custom css does not work-- even though it works when I try it in the Chrome Inspection tool.

    On top of that, the text that appears over the Grand Canyon on the home page needs to change to a smaller size when under 800 px. I added the media query to the custom css, but that does not make the font change. I'm pretty confident that the media query code is correct, and considering all the other weird css stuff I've had to deal with, I suspect that there is something going on with the theme or Visual Composer that requires things to be done differently than what I'm accustomed to.

    Once again, I would greatly appreciate if you would investigate these items:
    1. Why the background-stretch class does not work for the rows;
    2 If number 1 cannot be resolved, figure out why saving the new .vc# in the custom css no longer seems to work;
    3. Why my media query for the Grand Canyon text is not working.

    Thank you for your assistance.

    Earl

  • Adam Czajczyk
    • Support Gorilla

    Hi admin

    Thanks for additional info!

    3. Why my media query for the Grand Canyon text is not working.

    It is working now :slight_smile: The most important issue here was that somehow you skipped the . (dot) in front of the class name in the additional CSS so it was

    grandcanyontext {

    instead of

    .grandcanyontext {

    However, this was still overwritten by the set CSS (which I believe might be coming from the VC itself) inline. In such case the ugly "!important" comes in handy. It's also always better to use more specific selectors so instead of

    .grandcanyontext {

    use

    .grandcanyontext h2 {

    I made the changes (except for !important which was already there) and after clearing the cache I could see the changes.

    By the way: you got currently Page Caching and Asset Optimization enabled on site. That's a great solution but is not really recommended while the site is in "development" stage and you're making changes such as editing/adding CSS or similar. That's because

    - due to Page Caching changes added might not be immediately applied unless cache is manually cleared
    - due to Asset Optimization (as it changes CSS file names) it's difficult to "track down" what's overwriting given rules and it also additionally acts as an additional cache for CSS assets

    Therefore, after adding any (even the simplest one) CSS change you'd want to go to "Hummingbird -> Dashboard" page and use "clear cache" button there. But I'd rather suggest disabling both Page Cache and Asset Optimization for the development time and switch/configure it back on after the site is fully done :slight_smile:

    Anyway, the text size change seems to be working now.

    As for those rows and .background-stretch. I hate to admit this but I'm afraid I'm getting completely lost in "what is what" and "what should do what" again. A couple of posts ago I thought I understood it but I'm really not sure now. I'm wondering though: I previously said that "the class name doesn't really matter" and my point was that as long as the class name is the same the same rules should be applied. But maybe it's a bit different case here and it actually should use a separate class in order to apply separate rules? What I mean is that "rows" can be additionally affected by some other "native" CSS than "columns", therefore the same custom rules might actually be working in a different way for them.

    Kind regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.