Hey toolbox101, placing that effect on another arbitrary element would require copying the styles for the element and modifying them to fit with your new element.

Can you please give the full css, i’ll do modifications myself, when I try to copy it looks like i miss a css rule or something it does not come out right.

Hey toolbox101,

.nectar-video-box .nectar_video_lightbox:before {
.nectar-video-box .nectar_video_lightbox:before,
.nectar-video-box .nectar_video_lightbox:after {
    width: 50px;
    height: 50px;
    left: 50%;
    top: 50%;
    z-index: -1; 
    position: absolute;
    display: block;
    content: '';
    border: 1px solid #ff1053;
    border-radius: 50%;
    animation: pulse-2 2.6s cubic-bezier(.25,.9,.2,1) 0.4s infinite;
}
.nectar-video-box .nectar_video_lightbox:after {
   animation: pulse-2 2.6s cubic-bezier(.25,.9,.2,1) 0s infinite
}
}

Hey dzineee,  320px is the smallest size the container will shrink to, it will jump to 420px for larger phones ( > 480px ). If desired, new breakpoints could be added like so:

@media only screen and (min-width: 400px) and (max-width: 690px) {
  body .container {
    max-width: 400px;
  }}

Can I find these exact jumps somewhere?

So it’s:

320px (up to 479px) ; and 420px (up to 999px); and full width (?). Or there more steps?

So I could also add steps like this? That would make it quite long though.. Is the percentage option not a better way to go? Is there a way to find out which rules would be affected by changing from fix px width to %?

@media only screen and (min-width: 420px) and (max-width: 520px) { body .container { max-width: 400px; }}

@media only screen and (min-width: 520px) and (max-width: 620px) { body .container { max-width: 500px; }}

@media only screen and (min-width: 620px) and (max-width: 720px) { body .container { max-width: 600px; }}

Hey dzineee,

There’s also a tablet portrait width of 600px which is used when the device is 690px – 1000px. If you open the salient/css/responsive.css file, all the media queries are visible in there.

Hey wbutton, the next major release is right around the corner If you’d like to get in on the beta test, please reach out in regards via the contact form on my author page https://themeforest.net/user/themenectar

Cheers

Hey dzineee, that would require some custom development, but I did respond to your other comment in regards to altering the mobile order.

Cheers

Thank you for thinking along with me. Are you also available for custom development in these kind of cases?

Hey dzineee,

Unfortunately I’m not personally available for freelance projects. However, you could find someone through Envato Studio in regards

Hey dzineee,

The snippet could be altered for that:

@media only screen and (max-width: 1000px) { .woocommerce.archive .woocommerce-breadcrumb {    display: none; } }

Cheers

Thank you

You’re welcome dzineee

Hey lnbbroductions,

We don’t have any concrete plans to switch to elementor as the builder as of now, however the next release of Salient is bringing new viewport specific options for columns/rows which will make it possible to define how things are positioned easily for each different viewport

Cheers

Hey orlalarkin,

Which method are you using to update? Have you tried to manually update the theme yet by using FTP?

Cheers

Hey shirani93,

By default the bold weight in Salient is 600, if you’re using a body font close to that it could look similar. Try adding this into the add this into the custom css box located in the Salient options panel > general settings > css/script related tab:

body b, body strong {
  font-weight: 700;
}

If that doesn’t work, kindly share your URL in regards so I can take a look to assist.

Thanks

Hey dzineee,

WP Rocket actually wrote an article in regards to the page speed test, which may be more applicable to your setup since you’re using that.

The suggestions I gave were based on the page speed insights from the test – while it’s not necessary to concatenate your css/js with HTTP2, Google apparently will still generically “ding” your score. However other page speed services such as GTmetrix will not:

https://gtmetrix.com/reports/www.goedeshampoo.nl/2weghIsP

The main thing i’m seeing from the GTMetrix report is relating to caching scripts which all appear to be from third party implementations such as drift, facebook, google analytics etc.

It’s a bit easy to say to ignore it, while has announced multiple times to be taking their results into account more and more often. In fact it is now a measurement within their Google Webmaster Tools.

I agree to not fully focus on the score, but it’s still an important indicator. I am not striving for a perfect score, but 7 on mobile is great by any standard.

I agree with the caching of some external scripts, not much to do about that unfortunately. Thank you for your help.

If I run WP rocket. Should I also activate Lazyload with images witin Salient? And what about pages that do not have the Salient Builder but just the wordpress editor, can (and should) I active lazyload?

Hey dzineee, If you do activate minification and concatenation for CSS/JS, the google pagespeed score will increase – though in reality, it’s not necessary for the actual page speed of your site with your setup. Also, I don’t see the images on the home page currently lazy loading, so I would activate the Salient lazy loading option in the image element itself: https://ibb.co/ZXP9Bgt

Hey Teemuki, You can remove that by adding this into the custom css box located in the Salient options panel > general settings > css/script related tab:

#ajax-content-wrap .main-content table,
#ajax-content-wrap .main-content tr td {
    border: none;
}

Cheers

Hey dzineee,

The WooCommerce sidebar functionality has changed since then to place filters inside of toggles for mobile as to not take up unneeded space. This can be seen on the following demo: http://themenectar.com/demo/salient-ecommerce-ultimate/product-category/casual-shirts/

Can you please share your URL in regards so I can see your setup?

Yes it is indeed toggled; but it still takes up a lot of space. I was thinking of moving this to the end (right alignment) or simply remove it completely. Relevant lin is https://www.goedeshampoo.nl/product-categorie/shampoo/

Are we able to move the placement? If not, could you let me now the relevant code to hide it on mobile?

Hey dzineee, you can do so by adding this into the custom css box located in the Salient options panel > general settings > css/script related tab:

@media only screen and (max-width: 999px) {
.woocommerce.archive .main-content > .row {
    display: flex;
    flex-direction: column-reverse;
}
}

Hey ehong33234,

You can change the styling in the Salient options panel > form styling tab by enabling the option “Enable Fancy Select Styling”. If that doesn’t correct your other issue, please open a ticket on our support forum in regards with temporary admin credentials so we can take a closer look into this: https://themenectar.ticksy.com

Thanks in advance

Hey fiftyonefifty

This occurs naturally from the browser due to the content size changing. However, that element has been rebuilt in the current beta release and should not experience that behavior anymore. If you’d like a copy now, please reach out via the contact form on my author page https://themeforest.net/user/themenectar

Cheers

Hey paul0v2, I’m sorry to hear you’ve ran into an issue. Can you please share the actual page URL so I can help you?

Thanks in advance

It turns out it was the column animation, when it was on the content would show but if I refreshed the page it wouldn’t show it was a hit or miss. I took off all the column animations and it works fine now

Hey paul0v2,

If you’d like me to take a closer look into why that was occurring for you anytime in the future, kindly reach out in regards with the site URL via the contact form on my author page https://themeforest.net/user/themenectar

Cheers

Hey efsefs,

1. Yes, you can use the image gallery element: http://themenectar.com/docs/salient/galleries/#imagegrid

2. Yes, the carousel element can also be used

3. The Salient included carousels can be used, however we can’t guarantee 100% compatibility with third party carousels in the full height rows

4. You can have as much text as you need – the section will allow for scrolling. However, HTML is not allowed by default.

Cheers

Inside the image hotspot element, in the tab that opens on hover, we can add an image, or it is only text?

Hey efsefs,

Only text is allowed.

Hey ehong33234,

add this into the custom css box located in the Salient options panel > general settings > css/script related tab:

}
#ajax-content-wrap .cart .quantity input.plus, #ajax-content-wrap .cart .quantity input.minus {
    background-color: transparent!important;
    box-shadow: none;
    font-size: 20px;
}
#ajax-content-wrap .cart .quantity input.plus:hover, #ajax-content-wrap .cart .quantity input.minus:hover {
  color: #000!important;
}

Thank you for this. It got rid of the circular stroke around the +/- sign but how do I get the square (field) around the quantity as shown in my screenshot above?

Hey, you can add this in to get that:

.woocommerce .cart .quantity input.qty {
    background-color: #f2f2f2;
    border: 1px solid rgba(0,0,0,0.2);
}

Cheers

Hey MarcGarner, The youtube BG is a core feature of WPBakery, rather a Salient addition. As of now they do not include that as an option for columns.

Hey MarcGarner,

Give the column a class name so that it can be targeted e.g. “white-bg” and then add this into the custom css box located in the Salient options panel > general settings > css/script related tab:

.vc_row-fluid .white-bg:before {
  background-color: #fff;
  position: absolute;
  width: 100vw;
  right: 0;
  height: 100%;
 content: '';
 display: block;
 z-index: 2;
}

Works brilliantly, thanks awesome as always

You’re welcome MarcGarner

Hey devamo, can you kindly let me know the following: where the error is appearing, what version of the theme you’re using and have you verified that no third party plugin you may have active is causing it?

Thanks in advance

Hey Prince,

Right now there is the only when using a single image page builder element to also choose lazy loading, however i’ve noted your +1 for the idea to make it a global theme option.

Cheers