gray spaces on the side of the page

1omegazip

HI,
I showed the website to my client and the first thing he noticed was the two gray spaces on both sides (see uploaded images) of the page in all pages.

Here the image without the red circles

And here the home page:

I have noticed that also the space between the logo and the edge is much wider:

The browsers used are Chrome and Edge (versions in the other two images). All seen on a large screen (more than 2000 pixels) from a desktop PC. He says this doesn't happen to him with any other website.
What can be done to solve this problem?

Thank you for helping!

saguaros

HI 1omegazip

I don't see that grey space on left/right sides of your site now:

1omegazip

saguaros Me neither. But my client says, on his big screen on a PC with Windows system in Chrome and Edge it appears like that. I have no possibility to control that, since my client is far away, but I believe him.
Searching for what it could be I found this code:

.t3-wrapper {
    border-left: 1px solid #e7e8e9;
    border-right: 1px solid #e7e8e9;
    background: #ffffff;
    max-width: 1920px;
    margin: auto;
}

But I have no idea, if this has something to do with it. Also, because I can't test it. I'm working on a Mac with a smaller screen. I hope you can find out.
I just know, I would like him to see the site the way we do, without the gray space.
Thank you!

saguaros

1omegazip

You can try this:

@media (min-width: 1920px) {
.t3-wrapper {
  max-width: 100%;
}
}

1omegazip

Thank you saguaros
I asked a friend to control on his Imac with a wide screen and he had the gray spaces on the sides, too. I'm sorry, but I can't tell what size the screen is. The good news is , your code did his job, as you can see here (he had to empty cache to make it work):

I couldn't ask my client yet, if it works on his PC, too. I hope so and I will let you know about.

Two things though:
1 The logo + menu navigation part is much less wide compared to the rest of the page grid, which looks a little strange to me:

2 The header image is doubled as you can see better on this page:

Is there a way to solve these 2 problems?

saguaros

Hi 1omegazip

It due to the width of the container, you can override by this:

@media (min-width: 1920px) {
.container {
    width: 1296px;
}
}

and change the width as you wish.

1omegazip

Thank you saguaros
Since I have no direct way to test how it works and a meeting tomorrow morning with my client, will this code resolve both problems, the double header image and the space on the left/right side of the logo + menu bar part?

saguaros

1omegazip

For double image, you can try this:

@media (min-width: 1920px) {
.itemid-346 .t3-hero .custom {
    background-repeat: no-repeat;
    background-size: cover;
}
}

1omegazip

Thank you very much saguaros , also for the fast reply!
Your code did its job!