Joomla Templates Club 406,261 posts

[Bruce Mushi Friend Bruce MushiJoin date: September 2014Posts: 6Downloads:19Uploads:1]

#189351

Using JA Beranis Responsive Template, I need to Increase Width of the site from what it looks like currently 960x to something like 1024 or more.

My screen size is 24 inch and resolutions is 1920×1200. My Site looks small on the screen. Even on a 1280×1024 it still look small

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

#500639

So you’re saying you want the blue container to be the full width of your browser window?

[Bruce Mushi Friend Bruce MushiJoin date: September 2014Posts: 6Downloads:19Uploads:1]

#500640

Yes something like that. So when I add more menu and a bigger logo I wont run out of space so quick

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

#500641

Here is something you can try . . .

Within file path –> /t3-assets/dev/templates.ja_beranis.less.bootstrap-responsive.less.css

at line 78, you will see the following:


.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 880px;
}

modify the width property – for example . . .


.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 1024px;
}

Of course, you can play around with the pixel value until you arrive at the result you’re most happy with.

Let me know if this get’s you closer to what you wanted

[Bruce Mushi Friend Bruce MushiJoin date: September 2014Posts: 6Downloads:19Uploads:1]

#500643

This seems to work. Thanks.

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

#500644

<em>@nduasi 382815 wrote:</em><blockquote>This seems to work. Thanks.</blockquote>
Glad to be of assistance . . . All the best with your continuing site development

😎

[hhcbar Friend hhcbarJoin date: February 2013Posts: 14Downloads:5Uploads:7 Thanks: 4]

#501071

I cannnot find folder /t3-assets/dev/ in t3 assets i have just 3 css files? is my install ok?

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

#501083

<em>@hhcbar 383336 wrote:</em><blockquote>I cannnot find folder /t3-assets/dev/ in t3 assets i have just 3 css files? is my install ok?</blockquote>
If you can provide the url of the site you’re working on, I can try to take a look

[skillfulken Friend skillfulkenJoin date: August 2013Posts: 78Downloads:159Uploads:26 Thanks: 1 Thanked: 5 times in 1 posts]

#510186

Excuse me. I can’t find the css file too. Could you specify the location of the css file in details? I have installed the quickstart 3.1 version. Thanks!

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#510339

Hi skillfulken,

The file names of compressed .css files in /t3-assets/ will automatically change each time you update any changes in .less or .css files. The name of the file is created randomly and differently on different website. That is why you couldn’t find them and it is not a safe solution to edit the css styles in these compressed .css files.

On the T3v3 templates like JA Beranis, we do use the grid layout system of Bootstrap (span) to make the template position layout be responsive on device resolutions. In this case, you can increase the width of JA Beranis template on desktop view by creating a custom.css file at templates/ja_beranis/css/ path and put below overridden css styles into:


/*Increase the width of JA Beranis on desktop view*/
@media (min-width: 1200px) {
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 1024px;
}
}


Change to the width you want.

[skillfulken Friend skillfulkenJoin date: August 2013Posts: 78Downloads:159Uploads:26 Thanks: 1 Thanked: 5 times in 1 posts]

#511213

Hi Leo

Thanks for your reply!

I have followed the instruction but nothing happened. I have created a custom.css file and changed the width. Is there anything wrong?

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#511227

Hi skillfulken,

Yes. You just need to remove the texts “Code: ” in your custom.css file. The width of template will be effective then.

---

Attachments:

1. 

[vmalyshev Friend vmalyshevJoin date: October 2013Posts: 210Downloads:5Uploads:27 Thanks: 5]

#515871

Hi
It seems Ive followedd your instructions and made a mess of it.
In the Chinese menu the contact part has dissapeared.
Also, where do you add overrides?

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#515919

Hi,

You missed to create a Custom HTML module containing the company contact info to Chinese menu as you did on UK menu. That is why it does not appear whether changing the template width or not. Please try to create a contact module for the Chinese menu.

[vmalyshev Friend vmalyshevJoin date: October 2013Posts: 210Downloads:5Uploads:27 Thanks: 5]

#515958

Im afraid all there:
Contact Manager: Contacts – chinese menu
module – Chinese contact menu
Menu manager – contact menu
In fact it did show before, but when I tried to change css to make the site wider this happenned. As you can see the menu optnion is there its just that its not on the same level as the rest of menu option but a stand alone hypelinked item together with another menu item.
Smth happenned in css or elsewhere, however I did not touch anything other than container and changed width as per your instructions.
Thank you

[Author]

Posts