Joomla Templates Club 406,261 posts

[heritage123 Friend heritage123Join date: June 2014Posts: 23Downloads:0Uploads:7 Thanks: 2]

#199561

When the Décor template is viewed in its widest dimension there is a gutter (or margin) on the right and left sides of the main body content. In this mode the slideshow thumbnails are placed in the middle of the slideshow (areas highlighted in green decor2.jpg).

If the web browser width is decreased the gutter (or margin) is no longer visible and the slideshow width becomes equal to the width of the content body. Also in this configuration the slideshow thumbnails are correctly placed at the bottom of the slideshow and they are displayed above a transparent banner extending to the width of the slideshow. (areas highlighted in green decor1.jpg)

How do I configure the template so there is no wide gutter making this the maximum width of the template.

---

Attachments:

1. 
2. 

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

#541789

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

[heritage123 Friend heritage123Join date: June 2014Posts: 23Downloads:0Uploads:7 Thanks: 2]

#541790

http://vacationithaca.com/decor/

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

#541791

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:


.main-container {
margin: 0;
}

SAVE CHANGES – CLEAR CACHE – REFRESH PAGE

Better ?? 😎

[heritage123 Friend heritage123Join date: June 2014Posts: 23Downloads:0Uploads:7 Thanks: 2]

#541792

Thanks that seemed to remove the gutter (which I want) but this reveals anther underlying problem. The proportional size of the slideshow changes with browser window width. For example when the browser is maximized, the height of the slideshow is different (narrow) than when the browser gets smaller. I know the responsive template is supposed to accommodate different viewing conditions but when I set the height and width of the slideshow in the module’s “Basic Options” I expect the slideshow to maintain this perspective but it doesn’t seem to do so.

How do I maintain a consistent aspect ratio for the slideshow?

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

#542273

Please try to use my workaround below

Open templates/ja_decor/css/custom.css file

Change

.view-featured .ja-ss-thumbs-wrap {
bottom: 0;
background: url("/decor/templates/ja_decor/images/white-trans.png");
}
}

To

.view-featured .ja-ss-thumbs-wrap {
bottom: 0;
background: url("/decor/templates/ja_decor/images/white-trans.png");
display: none;
}
}

[Author]

Posts