Hey,

Add this into your custom css box in the Salient options panel:

@media only screen and (max-width: 1000px) and (min-width: 1px) {
#mobile-menu[data-mobile-fixed="1"] {
    display: block!important;
}
}

Cheers

Thanks for the reply. Now when I click the menu button on mobile it says “no menu assigned.”

To make sure that this is not a plugin conflict or issue by something else, I activated Storefront theme and I can see product images fine. Here’s a screenshot

Hey,

1. That’s a portfolio element set to constrain max columns to 4 with every project using the tall size. Each project is also using the option for “Custom Content Grid Item” (introduced in 6.0) which opens a new editor in the project edit page. Any basic content can be placed in here which will overlay the project featured image

2. Those animated icons are available as the font family called “Linea” in your icon shortcode available in the nectar shortcode generator

Cheers

and what about the buttons you see on those images

Hey again, the buttons are added in the custom content grid editor item I mentioned in my response above – they’re nectar button shortcodes (available in the nectar shortcode generator)

Hey!

1. Add this into the custom css box located in your Salient Options panel:

@media only screen and (max-width: 1000px) {
body .nectar-slider-wrap[data-full-width="true"] .swiper-slide .content p, body .nectar-slider-wrap[data-full-width="boxed-full-width"] .swiper-slide .content p, body .full-width-content .vc_span12 .swiper-slide .content p {
    font-size: 14px!important;
    line-height: 16px!important;
}
}

2. Are you talking about on mobile screen sizes? If so it would be a question of making the buttons even smaller so they had room to

3.

@media only screen and (max-width: 1000px) {
.swiper-slide[data-x-pos="right"] .content {
    width: 100%!important;

}
.slider2 p {
    width: 100%;
}
}

Unfortunately, this didn’t work….on a smaller screen size the font is still much smaller. Also, the first slide font and buttons look different than the second slide. Secondly, on the first slide on large and small screens, the buttons are not aligned next to each other; however, on the 2nd slide the buttons are aligned.

Yeah I am talking about the mobile screen. However, I am thinking that if the button are much smaller it would be difficult to read, so we can keep them stacked here.

Lastly, is there a way to make the image responsive as the young girls faces are cut off on my mobile devices.

Hey – use this instead:

@media only screen and (min-width: 1300px) {
.swiper-slide[data-x-pos="right"] .content {
    width: 58%!important;
}
}
@media only screen and (max-width: 1300px) and (min-width: 1000px) {
.nectar-slider-wrap[data-full-width="true"] .swiper-slide .content p, .nectar-slider-wrap[data-full-width="boxed-full-width"] .swiper-slide .content p, .full-width-content .vc_span12 .swiper-slide .content p {
    font-size: 30px!important;
    line-height: 30px!important;
}
.swiper-slide[data-x-pos="right"] .content {
    width: 65%!important;
}
}

Also, in order to make the image responsive in the way you want you’ll have to turn off the fullscreen slider effect since that constrains the image to the aspect ratio of the screen and on portrait orientation of a phone that will require the image to clip

All of this worked..the only problem I have now is that the logo image that I have placed in the nectar slider, didn’t shrink..it’s still big. Can I make this responsive?

Glad to hear! Try this as well:

@media only screen and (max-width: 1000px) and (min-width: 1px) {
.swiper-slide .content p img {
    max-width: 25%!important;
}
}

It’s been 24 days since my last reply here and wanted to see if I could still get some assistance with the Nectar Slider becoming responsive across devices. I have added the css above, but the logo is still large and on certain laptops and desktops, I can’t see my call to action donate buttons.

Have you tried altering the size of your image in other viewports as well?

@media only screen and (max-width: 1400px) and (min-width: 1000px) { .swiper-slide .content p img { max-width: 25%!important; } }

Looked like this has worked except now the buttons are too small you can’t read the text on the buttons. So is there not a way to make the logo that’s inserted there smaller. Also the images are cut off

Hey – could you share the page in regards where you’re trying to do this?

I’m currently working on my local host, but is it possible to do this on a page (not a blog post)?

Hey – what shortcode are you using for the pagination?

Hi! I was using <!-nextpage-> .. It hides the content below, but then I can’t access it

Oh, and I’ve disabled all plugins one-by-one.

Hey – it appears you have that page set as your posts page in Settings > Reading in your admin panel. After you remove that it should go away

Thanks so much for a prompt reply. I’ve tried doing what you suggested, changing the Posts page to a different page, but this just changes the header on the page and still shows a portfolio file as the page is still active. Any other ideas?