Archived topic
Website Customization
1 reply · Started by Jeremy on July 22, 2020
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!
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.