Joomla Templates Club 406,261 posts

[cougniot Friend cougniotJoin date: October 2008Posts: 31Downloads:0Uploads:4 Thanks: 3 Thanked: 1 times in 1 posts]

#197724

Hi,

I’d to know how to disable the max size responsive where the slideshow takes all the screen size.
I prefer the previous size (about 1200px), where slideshow is aligned with bottom content.

I search for in CSS files, but I don’t founded where to make this change to disable 1400px size.
Do you have an idea ?

Preview correct resizing for me I’d like to keep when navigator becomes bigger :

Preview of the higher resizing (1400px…) I’d like to disable

---

Attachments:

1. 
2. 

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

#534925

Access to view your site appears to be password protected.

Will need the access login information to inspect the issue further.

[cougniot Friend cougniotJoin date: October 2008Posts: 31Downloads:0Uploads:4 Thanks: 3 Thanked: 1 times in 1 posts]

#534936

It is open now

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

#534940

Try This . . . .

If you haven’t yet done so,, create a new file called “custom.css” within file path –> /templates/ja_decor/css

Within that custom.css file, paste the following CSS rule:


.ja-ss-item img {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 1200px;
width: 100%;
}

SAVE CHANGES – CLEAR CACHE – REFRESH PAGE

How does that look?

[cougniot Friend cougniotJoin date: October 2008Posts: 31Downloads:0Uploads:4 Thanks: 3 Thanked: 1 times in 1 posts]

#534947

Hi, thanks for your answer.
I tested it, it is online, but you’ll see when I increase the navigator size, I always have the same problem

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

#534954

<em>@cougniot 427006 wrote:</em><blockquote>Hi, thanks for your answer.
I tested it, it is online, but you’ll see when I increase the navigator size, I always have the same problem</blockquote>

I don’t see the changes implemented as I suggested . . . did you enter the above CSS modifications?

[cougniot Friend cougniotJoin date: October 2008Posts: 31Downloads:0Uploads:4 Thanks: 3 Thanked: 1 times in 1 posts]

#534969

yes sure, the custom.css file is online at the right place
template/ja_decor/custom.css

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

#534974

<em>@cougniot 427032 wrote:</em><blockquote>yes sure, the custom.css file is online at the right place
template/ja_decor/custom.css</blockquote>

Nope . . . . it needs to be—> templates/ja_decor/css/custom.css

[cougniot Friend cougniotJoin date: October 2008Posts: 31Downloads:0Uploads:4 Thanks: 3 Thanked: 1 times in 1 posts]

#535048

This well where it is…

and the content file :

---

Attachments:

1. 
2. 

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

#535123

Please temporarily set “Optimize CSS” to “Off” within your Template Manager–General settings.

Let me know when you’ve done this.

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

#535287

<em>@cougniot 426964 wrote:</em><blockquote>Hi,

I’d to know how to disable the max size responsive where the slideshow takes all the screen size.
I prefer the previous size (about 1200px), where slideshow is aligned with bottom content.

I search for in CSS files, but I don’t founded where to make this change to disable 1400px size.
Do you have an idea ?

Preview correct resizing for me I’d like to keep when navigator becomes bigger :

Preview of the higher resizing (1400px…) I’d like to disable
</blockquote>

You can follow step below to change width size from 1400px to 1200px.

Open the templates/ja_decor/less/variables.less file,

Change


257 // Large screen / wide desktop
258 // Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
259: @screen-lg: 1400px;
260 @screen-lg-min: @screen-lg;
261 @screen-lg-desktop: @screen-lg-min;
...
662
663 // Large screen / wide desktop
664: @container-large-desktop: ((1400px + @grid-gutter-width));
665 @container-lg: @container-large-desktop;
666 @container-lg-max: @container-lg - 1;


To


257 // Large screen / wide desktop
258 // Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
259: @screen-lg: 1200px;
260 @screen-lg-min: @screen-lg;
261 @screen-lg-desktop: @screen-lg-min;
...
662
663 // Large screen / wide desktop
664: @container-large-desktop: ((1200px + @grid-gutter-width));
665 @container-lg: @container-large-desktop;
666 @container-lg-max: @container-lg - 1;


Once done, click compile LESS to CSS button from ja_decor – Default of template manager.

[Author]

Posts