[Support request] Website Customization

[Jeremy]

Hello,

I am looking to update the size of the container on my posts (make the content wider).

I noticed I have this in my additional CSS:

/* GeneratePress Site CSS */ @media (max-width: 768px) {
.top-bar {
display: none;
}
}

body:not(.home) .top-bar {
display: none;
}

.topbar-text {
letter-spacing: 2px;
}

.main-navigation .main-nav ul li a, .menu-toggle, .main-navigation .mobile-bar-items a {
text-align: center;
}

.main-navigation a {
letter-spacing: 1px;
}

#generate-slideout-menu {
padding-top: 20px;
}

.mobile-header-navigation {
padding: 5px;
}

h1 {
letter-spacing: 2px;
}

.hero-headline {
font-size: 34px;
letter-spacing: 6px;
}

@media( max-width: 768px ) {
.hero-headline {
font-size: 27px;
letter-spacing: 2px;
}
}

#page-header-663 .page-header-content-container {
padding-top: 120px;
padding-bottom: 240px;
}

@media( max-width: 768px ) {
#page-header-663 .page-header-content-container {
padding-top: 80px;
padding-bottom: 120px;
}
}

.cta-headline {
text-transform: uppercase;
text-align: center;
color: #ffffff;
letter-spacing: 4px;
}

.lgc-column {
padding: 10px;
}

blockquote {
max-width: 700px;
text-align: left;
margin: 30px;
padding: 20px;
font-size: 18px;
color: #999999;
}

body.single .site.grid-container {
max-width: 1000px;
}

@media (min-width: 1025px) {
.form-width {
padding: 0px 300px;
}
}

.button.topbar,
.button.topbar:visited,
.button.topbar:focus {
color: #ffffff;
font-size: 14px;
background: transparent;
border: 2px solid #ffffff;
padding: 2px 12px;
margin: 6px 10px;
border-radius: 6px;
transition: all 0.6s ease 0s;
}

.button.topbar:hover,
.button.topbar:active {
color: #ffffff;
background: transparent;
border: 2px solid #08cec7;
}

.button.ghost,
.button.ghost:visited,
.button.ghost:focus {
color: #ffffff;
letter-spacing: 1px;
background: transparent;
border: 2px solid #ffffff;
padding: 8px 20px;
margin: 10px;
border-radius: 6px;
transition: all 0.6s ease 0s;
}

.button.ghost:hover,
.button.ghost:active {
color: #ffffff;
background: transparent;
border: 2px solid #08cec7;
}

input[type=”button”], input[type=”reset”], input[type=”submit”], a.button, a.button:visited {
line-height: inherit;
letter-spacing: 1px;
border-radius: 6px;
transition: all 0.6s ease 0s;
}

.nf-form-fields-required {
display: none;
}

.ninja-forms-req-symbol, .nf-error-msg {
color: #05bcbf !important;
font-size: 15px !important;
}

input[type=”text”], input[type=”email”], input[type=”url”], input[type=”password”], input[type=”search”], input[type=”tel”], input[type=”number”], textarea, select {
border: 1px solid;
border-color: #ffffff;
background-color: #f8f8f8;
padding: 20px;
}

.nf-error .ninja-forms-field {
border: 1px solid #05bcbf !important;
}

/* End GeneratePress Site CSS */

Please can you help direct me with what code to update and what can be removed if not required,

Many thanks!

[David]

Hi there,

in that CSS you have this:

body.single .site.grid-container {
   max-width:1000px
}

You can adjust that – to a maximum of what is set in the Customizer > Layout > Container > Content Width. Or simply delete it and it will use the customizer width.

Since that site was designed we added Content Width Controls to Layout Element.

https://docs.generatepress.com/article/layout-element-overview/

So if you want different widths for pages then posts for example.
Set the largest width you need in the Customizer.
Then use the Layout Element > Content > Width to reduce it for other parts of your site.

[Author]

Posts