Joomla Templates Club 406,261 posts

[daynw Friend daynwJoin date: July 2013Posts: 12Downloads:0Uploads:0 Thanks: 2]

#205352

Hi There, in JA Nuevo, the JA Slideshow Lite width is set to 1180px wide. How can I set it to fullwidth so it’s responsive to the width of the browser like in many of your other templates?

Thank you in advance,
D

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#566146

So that we can try to best assist you, please provide the url of the site you’re working on.

[daynw Friend daynwJoin date: July 2013Posts: 12Downloads:0Uploads:0 Thanks: 2]

#566293

Thanks Tom, can you perhaps give me your email address so I can message you personally. The site is offline so I need to give you login details…

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#566343

<em>@daynw 467677 wrote:</em><blockquote>Thanks Tom, can you perhaps give me your email address so I can message you personally. The site is offline so I need to give you login details…</blockquote>

You can send me the info in a private message here on the forum

1 user says Thank You to TomC for this useful post

1. daynw

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#567125

I created a new “custom.css” file for you – within file path: /templates/ja_nuervo/css/

Within that custom.css file I added the following:

.ja-slideshow .container {
padding: 10px 10px 0 10px;
width: auto;
}

As explained HERE in our FAQ section

The question I now have is …. how large is the original image you’re currently using for your slideshow?

[daynw Friend daynwJoin date: July 2013Posts: 12Downloads:0Uploads:0 Thanks: 2]

#567208

Thanks so much Tom. I can make the image any size really, I just what it to completely cover the grey background so you just see the image….but i was planning on making the final images around 1900 x 740.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#567263

So did that do the trick?

[daynw Friend daynwJoin date: July 2013Posts: 12Downloads:0Uploads:0 Thanks: 2]

#568184

Hi Tom,

Yes and no. If the browser is is over 1260 pixels wide all look great thank you but drop below that and you can still see the grey background on the sides, I want the image to go the full with no matter what the width of the browser, just like the grey background does.

Also, I cannot get the off-canvas menu to show at all and I checked all the obvious things like menu “show on all pages”. so now when the screen drops below 1260px there is no menu at all. Any idea why it will not show? could it be the new CSS?

Thank you!:)

[daynw Friend daynwJoin date: July 2013Posts: 12Downloads:0Uploads:0 Thanks: 2]

#733280

Hi Tom,

Yes and no. If the browser is is over 1260 pixels wide all look great thank you but drop below that and you can still see the grey background on the sides, I want the image to go the full with no matter what the width of the browser, just like the grey background does.

Also, I cannot get the off-canvas menu to show at all and I checked all the obvious things like menu “show on all pages”. so now when the screen drops below 1260px there is no menu at all. Any idea why it will not show? could it be the new CSS?

Thank you!:)

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#568514

@daynw: The mega menu on JA Nuevo template is working with fullwidth(large layout) that’s why you can see the menu will be auto changed to mobile menu if width less then 1280px.

But you can change this

+ Backup all css styles on your site first

+ Open templates/ja_nuevo/less/variables.less file

find and change

@grid-float-breakpoint: @screen-lg-min;

to

@grid-float-breakpoint: @screen-sm;

+ Once done to click compile LESS to CSS button backend site

---

Attachments:

1. 

[daynw Friend daynwJoin date: July 2013Posts: 12Downloads:0Uploads:0 Thanks: 2]

#568699

Thank you but I am happy to use the mobile menu when smaller 🙂

The issue with the full width banner is still a problem. When the browser is over approximitly 1330px the image is full width but any narrower and you can see the grey background on the sides where the previous and next arrows show.

How do I get it so the image is always the full width accross the browser no matter what the browser width is?

Thank you,
D

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#568762

In this case, I would like to check that directly on your site, please give me URL of your site and a screenshot of the problem. I will help you to find the solution.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#733855

In this case, I would like to check that directly on your site, please give me URL of your site and a screenshot of the problem. I will help you to find the solution.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#569626

<em>@daynw 470864 wrote:</em><blockquote>Thank you but I am happy to use the mobile menu when smaller 🙂

The issue with the full width banner is still a problem. When the browser is over approximitly 1330px the image is full width but any narrower and you can see the grey background on the sides where the previous and next arrows show.

How do I get it so the image is always the full width accross the browser no matter what the browser width is?

Thank you,
D</blockquote>

You can sort it out with the solution below

Open templates/ja_nuevo/css/custom.css file and add new rule


@media screen and (max-width: 1350px) {
.ja-slideshow .container {
padding-left: 0px;
padding-right: 0px;
}
}

.ja-ss-btns .ja-ss-next {
right: 0px;
}

.ja-ss-btns .ja-ss-prev {
left: 0px;
}


[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#734715

<em>@daynw 470864 wrote:</em><blockquote>Thank you but I am happy to use the mobile menu when smaller 🙂

The issue with the full width banner is still a problem. When the browser is over approximitly 1330px the image is full width but any narrower and you can see the grey background on the sides where the previous and next arrows show.

How do I get it so the image is always the full width accross the browser no matter what the browser width is?

Thank you,
D</blockquote>

You can sort it out with the solution below

Open templates/ja_nuevo/css/custom.css file and add new rule


@media screen and (max-width: 1350px) {
.ja-slideshow .container {
padding-left: 0px;
padding-right: 0px;
}
}

.ja-ss-btns .ja-ss-next {
right: 0px;
}

.ja-ss-btns .ja-ss-prev {
left: 0px;
}


[Author]

Posts