[Support request] Website Customization

Home Forums Support Website Customization

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1372037
    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!

    #1372069
    David
    Staff
    Customer Support

    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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.