Moviemax site width: 100% without margin possible?

mastermatrix

Hello,

I'm using the moviemax template - it's perfect for me!

Maybe you can help me with the following question:
I want to increase the width of the site to 100%, so that there are no margins left and right.
I tried to enhance the grid width in theme magic, for example with 2000px, but it doesn't work well.

Is it possible to put some code for the t3 wrapper or something else into the custom.css to solve this ?

Thank you in advance!

saguaros

mastermatrix
Hi,

To change it globally, I suggest you change in LESS file:
- Open the file: [root]/templates/ja_moviemax (your default template)/less/variables.less
- Look for this declaration of 'container':

// Container sizes
// --------------------------------------------------

// Small screen / tablet
@container-tablet:             ((720px + @grid-gutter-width));
@container-sm:                 @container-tablet;

// Medium screen / desktop
@container-desktop:            ((940px + @grid-gutter-width));
@container-md:                 @container-desktop;

// Large screen / wide desktop
@container-large-desktop:      ((1140px + @grid-gutter-width));
@container-lg:                 @container-large-desktop;

// Very Large screen
@container-hd-desktop:         ((1600px + @grid-gutter-width));;
@container-hd:                 @container-hd-desktop;

and change the value for the variable: container-hd-desktop to the value as you wish
- Backup all CSS files first
- Then go to backend > Extensions > Templates > JA Moviemax template style > hit the button <>LESS to CSS to compile less to css

Regards

mastermatrix

Thank you very much.

I did the changes and compiled the less to css, cleared all caches, but nothing changes :-(

// Very Large screen
@container-hd-desktop:         ((2560px + @grid-gutter-width));;
@container-hd:                 @container-hd-desktop;

aman204

mastermatrix You seem to have added this CSS rule-set as seen in screenshot which is superseding other CSS declarations. Ref: Screenshot. Kindly remove this with !important property

Unable to get the right CSS file reference as you have turned on CSS compression in T3 framework settings. You can turn it off in order to enable us to take closer look

mastermatrix

Thank you - this was a test a few minutes before:
It worked for the full width site as I wish, but then the navbar wasn't any more in full width after resizing the browser window :-)

I deactivated CSS Compression and removed the setting in my custom.css, so you may have a closer look now...
Thanks!

aman204

mastermatrix Kindly review as I am unable to access admin panel with given admin details in edit fields so as to take closer look

mastermatrix

Hi, I tested the Login Details for the backend, they are OK - please try again, thank you...!

(Just username and password needed, leave the Security Key empty)

saguaros

mastermatrix

Could you take a backup of your site (especially CSS files)? I will try to compile less to css then.

Also share the FTP account.

mastermatrix

saguaros

Thank you, I took a backup of the site and the css files.
And I created an FTP account for you.

Don't worry, the site isn't live yet :-)

aman204

mastermatrix You may check now. Kindly ensure to clear your browser cache if changes dont reflect

Had to make the variable value change as highlighted in this file : /local/less/themes/luxor/variables-custom.less. Ref: Screenshot as you had created new custom style in thememagic which henceforth resulted in specific less file getting isolated under local folder

You may change values accordingly and kindly ensure that you perform the final steps as outlined by @saguaros

Backup all CSS files first

Then go to backend > Extensions > Templates > JA Moviemax template style > hit the button <>LESS to CSS to compile less to css

mastermatrix

Thank you very much guys, you saved my day!
And thank you, I learned something new again :-)

Have a nice weekend!