Max width for the entire website not working - Support | Kriesi.at

Tagged: site, website, width

Viewing 21 posts - 1 through 21 (of 21 total)

Author

Posts
October 24, 2017 at 10:46 pm #868428
Demaup
Participant
Hi guys!

I’m trying to limit the width of my entire website to 1440px.

In the General Layout section the max width is already set as 1440px + I tried to add the following code to the Quick CSS and clear cache of my browser but it’s still not working…
```
.responsive .container {
   max-width: 100%;
}
```
Any guess to solve my problem?

Cheers,

Demaup
Website link : https://ergosolutions-transitions.ovh/
October 24, 2017 at 10:59 pm #868434
Jordan Shannon
Inactive Moderator
Hey Demaup,

Have you tried changing max-width to
```
1440px!important;
```
Best regards,
Jordan Shannon
October 25, 2017 at 12:37 am #868472

Demaup
Participant

Hey Jordan,

I tried but it isn’t working unfortunately.

October 25, 2017 at 2:44 pm #868749

Jordan Shannon
Inactive Moderator

Hi,

Do you have any other custom css that may be prevent that css from running? Also, try disabling all other active plugins to ensure that there is no other style conflicts.

Best regards,
Jordan Shannon

October 26, 2017 at 4:32 pm #869249

Demaup
Participant

Hi Jordan,

I don’t have any custom CSS that may prevent the max width of the container.
I tried to disable all the plugin (except Zen Menu Logic, because if I do this I will have to remake all the work) but nothing happened.

October 27, 2017 at 6:29 pm #869704
Yigit
Keymaster
Hi,

Please post us your login credentials (in the “private data” field), so we can take a look at your backend.
1. Install and activate ” Temporary Login Without Password “.
2. Go to ” Users > Temporary Logins ” on the left-side menu.
3. Click ” Create New “.
4. Add the email address for the account ( you can use (Email address hidden if logged out) ), as well as the ” Role ” making that the highest possible and the expiry about four days
  ( do be sure that we have enough time to debug ).
5. Click ” Submit “.
6. You’ll now have a temporary account. Please provide us here in the private section the URL, so we can login and help you out.
When your issue is fixed, you can always remove the plugin!
If you prefer to not use the plugin, you can manually create a admin user and post the login credentials in the “private data” field.

Best regards,
Yigit
October 31, 2017 at 3:03 pm #870852

Demaup
Participant

Hi Yigit!

The URL is in the private content.

Thanks for your help and sorry for the late response.

Demaup

October 31, 2017 at 3:27 pm #870855

Yigit
Keymaster

Hi,

Container width is currently 1440px. I attached a screenshot in private content field.
Can you please post a screenshot and show the changes you would like to make? You can upload your screenshots on imgur.com or Dropbox public folder and post the links here.

Best regards,
Yigit

October 31, 2017 at 4:28 pm #870870

Demaup
Participant

Thanks for you quick answer!

I would like to set the max width to 1440px for the entire website (not only the container but also the main menu, etc…) and then if the website is on a very large screen (1900px for example) the website will be on the middle and sides will show background color. Is it possible?

October 31, 2017 at 5:51 pm #870911

Yigit
Keymaster

Hi,

I went to Enfold theme options > General Layout and switched to boxed layout. I believe that is what you meant. Please review your website :)

Best regards,
Yigit

October 31, 2017 at 10:17 pm #871014

Demaup
Participant

Hi,

Unfortunately this is not what I meant. If you watch the website on a large screen he will be “boxed” but still be really large.

What I want is more what is working on this website for example : https://laboitenumerique.fr/
If you extend your tab width, the responsiveness of the website will extend until -more or less- 1400px. And then all elements stop growing and stay on a 1400px container basis.

The boxed layout just put sides of color but if you extend your navigation tab on my website, the website will never stop “growing”.

November 4, 2017 at 4:24 am #872375

Ismael
Moderator

Hi,

I’m sorry but we don’t understand what you’re trying to do. Please provide a screenshot of the changes that you’d like to make on imgur or dropbox.

Best regards,
Ismael

November 14, 2017 at 2:34 pm #876574

Demaup
Participant

Hi Ismael,

No worries it’s just that it is difficult for me to explain, sorry.

What I want is to have a responsive website until a 1440px width screen. When a screen is bigger that 1440px I would like to have a “boxed” website with sides appearing and the website inside a 1440px container. Is it maybe easier to understand? Is it possible?

Cheers and thanks,

Demaup

November 16, 2017 at 4:37 am #877352

Ismael
Moderator

Hi,

Thank you for the update.

When a screen is bigger that 1440px I would like to have a “boxed” website with sides appearing and the website inside a 1440px container.

I’m sorry but that’s not possible by default. You have to choose between “boxed” or “stretched” layout but you CAN’T have both. Please hire a freelance developer or contact our partner, Codeable.

// https://kriesi.at/contact/customization

Best regards,
Ismael

November 16, 2017 at 8:00 pm #877706

Demaup
Participant

Thank for your response!

I understand but the thing I don’t get is: I have a friend who used enfold for his website (https://laboitenumerique.fr/) and he did nothing special and this is working as the way I ask.

His website on a 13″ screen: https://imgur.com/a/wCGjR
His website on a 15″ screen: https://imgur.com/a/uZlya

The only different plugin I’m using is Zen Menu Logic. Do you think a “conflict” can exist between Enfold and the plugin?

November 17, 2017 at 7:26 am #877961

Ismael
Moderator

Hi,

There’s a lot of grid row element on your site which is a full width element while the other site is using the tab section element.

Best regards,
Ismael

November 17, 2017 at 6:28 pm #878234
Demaup
Participant
Understood! Thanks Ismael

For info I found an alternate solution:
I set custom CSS for Elements and I had this code to the custom CSS
```
.custom-width-element {
    max-width: 1360px !important;
}
#header {
    max-width: 1360px !important;
}
#footer {
    max-width: 1360px !important;
}
```
And then when someone see the website on a screen larger than 1360px is not responsive.

Last question: with this solution the website stay on the left side of the screen (when a screen > 1360px). Any solution to put it in the middle of the screen? I put a link in private content of the page where I implement this solution.
November 17, 2017 at 8:04 pm #878283
Demaup
Participant
Update:

I added auto margin:
```
.largeur-max {
    max-width: 1360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
#header {
    max-width: 1360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
#footer {
    max-width: 1360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
```
It’s working perfectly for all elements except the header and the color section.
Any guess how to solve it?

Example page in private section.
November 21, 2017 at 2:56 am #879453
Ismael
Moderator
Hi,

Thank you for the update.

Please add the following css code.
```
.html_header_top.html_header_transparency #header {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.avia-section {
    margin: 0 auto;
    position: relative;
    float: none;
}
```
Best regards,
Ismael
November 21, 2017 at 4:53 pm #879824

Demaup
Participant

This is working perfectly! Thanks Ismael for your help: you’re a genius!

Demaup

November 22, 2017 at 5:54 am #880065

Ismael
Moderator

Hi,

No problem. Please feel free to open a new thread if you need anything else. :D

Best regards,
Ismael
Author

Posts

Viewing 21 posts - 1 through 21 (of 21 total)

The topic ‘Max width for the entire website not working’ is closed to new replies.