Longevity Page Width

If it is not clear what I’m asking, you can have a look at
https://www.viaggiatricedichiarata.com
This is how I’d like to see it, but with the Longevity theme.

Just the content area only or the whole thing from top to bottom, including the header area and footer?

Thanks your reply.
I want to reduce the space Just from the menu to the articles.
Is it possible?
Thanks

The space between the menu and the articles is a bit dofferent from what you wrere referring to previously. But let’s start with the “boxed” question first. This theme uses the Bootstrap grid layout, so it has a set value of widths depending on various screen sizes. The smallest is 1200 on desktop monitors. If you want a boxed layout but you also need to reduce the main structure, you’ve got some custom CSS to do.

By default, the theme has this:

@media (min-width: 1200px) {
.container {
    width: 1190px;
}
}
@media (min-width: 992px) {
.container {
    width: 990px;
}
}
@media (min-width: 768px) {
.container {
    width: 750px;
}
}

Those are media queries that changes the main containers to those sizes based on the screen size the site is viewed in.

The above is also for a full width page, not boxed. But if you want to change the boxed to be smaller, then you need to modify the class that does the boxed 1200 size.

#page.boxed1200 {
	max-width: 1200px;
	margin: 24px auto;
}

You will need to override the 1200px to be your size you want. Make sure it’s not smaller than the first media query further up where it has the min-width of 1200px. So whatever you make that one, such as 1000px, then your boxed1200 style needs to be no less than 1000px as well.

IMPORTANT: either use the Additional CSS tab in the customizer for this or a plugin like Simple Custom CSS. Do not edit the theme’s style.css file.

I’ve done copy and paste of this one into the additional css:
#page.boxed1200 {
max-width: 1200px;
margin: 24px auto;
}

I’ve changed the numbers to 1000 but nothing has changed.
What am I doing wrong?

only change the number in the max-width line, so in your case it would look like:

#page.boxed1200 {
max-width: 1000px;
margin: 24px auto;
}

Hi, it doesn’t work.
I would like to attach a screenshot before and after but I don’t know how to do it here.
The box becomes smaller from right to left, and things in the box, like menu and header are left outside.
I would like to reduce the space between the menu, under the header picture, and the articles. Reducing the box size doesn’t change
Sorry, is a bit difficult for me to explain things I have never seen before

can you post your actual website URL please
A screenshot would also help, maybe try uploading it somewhere else and provide me a link to it

See if you can see this one:
https://209.e7a.myftpupload.com/

This is with the theme I want to change:
https://www.viaggiatricedichiarata.com/

I love the Longevity, but I need to make the picture and menu closer to the articles, like in Voyage

thanks, I can see the site now.

Try adding this to your custom CSS as well and see if that sorts things out:

@media (min-width: 1200px)
.container {
    width: 1000px;
}

Nothing has changed, I’ve tried with both togetherand this one alone

Okay, I see where was the issue. Remove what you added so far and just add this all together and it will work:

@media (min-width: 1200px) {
body .container {
    width: 1000px;
}
}
#page.boxed1200 {
    max-width: 1000px;
    margin: 24px auto;
}

Hes, done.
https://209.e7a.myftpupload.com/

Just still too much space between menu and articles, can we fix that too?
Thanks, you’re being very helpful

I’m glad it works.
Add this as well to tighten up the space on the top

@media (min-width: 992px) {
#no-banner {
    height: 25px;
}
}
body #content {
    padding: 30px 0 60px 0;
}