Support » Theme: Spacious » top and body have different widths

  • Resolved jlevant

    (@jlevant)


    I was told by the support folks before I downloaded my theme at all that I could have a full background image on top. Turns out the secret was to expand my logo to the full width to get the look of a background image, so I did that. However, it does not go to the edges as the sliders and the footer area does. The top logo graphic and the sliders were uploaded at the same width. I chose the boxed 1218px option for the site if that’s relevant.

    Any fixes out there? (I don’t mind reducing the width of the sliders, but I’m afraid they will be stretched.)

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • Hi,

    If you want to make the logo full width, could you go to the Appearance > Customize > Additional CSS in the dashboard and insert the code mentioned below:

    #header-text-nav-container .inner-wrap {
        max-width: 100%;
    }
    #header-left-section {
        margin: 0;
    }
    #header-logo-image {
        padding: 0;
    }
    #header-logo-image img {
       width: 100%;
    }
    #header-right-section {
        margin-right: 30px;
    }

    The left side is showing little white as there is a white part in the image, you can crop that part and insert the image again to show full width.

    Thanks.

    jlevant

    (@jlevant)

    Thank you, Rajesh
    I’m afraid that didn’t move the logo-image at all. You can see – I’ve added that to the CSS. The slides were all the same width as the top graphic when I started, but via my two days of emails back and forth, I’ve been asked to try various different sizes of both the top graphic and the slides. At this point, I think the easiest thing will be for me to just make the slides have white edges that match the margin on the top. Unless you have a better idea, I will do that – you can’t believe how much time this has taken and no resolution.

    Hi,

    Could you take a look at the above code as they are changed? The above code will make the logo full width. Sorry for the inconvenience.

    Thanks.

    jlevant

    (@jlevant)

    I did – it didn’t work!

    Here is my whole Additional CSS:

    #header-left-section {
    float: none;
    text-align: center;
    }
    #header-logo-image {
    float: none;
    }

    .header-post-title-class {
    display:none;
    }

    .header-post-title-container {
    padding: 0;
    line-height: 5px;
    color: #ff4d00;
    }

    #header-text-nav-wrap {
    padding-bottom:5px;
    }

    #featured-slider .entry-container {
    top: 70%;
    opacity: 0.5;
    }

    #featured-slider .slider-read-more-button {
    background-color: #222;
    }

    /* below centers middle column on footer*/
    .tg-one-third.tg-column-2, .tg-one-third.tg-column-2 .widget-title {
    text-align: center;
    }
    /* below sets alignment for righthand column on footer*/
    #colophon .tg-one-third.tg-after-two-blocks-clearfix, #colophon .tg-one-third.tg-after-two-blocks-clearfix .widget-title {
    text-align: right;
    }

    .footer-widgets-wrapper {
    background-color: #565559;
    }

    .footer-widgets-area {
    padding-top:10px;
    padding-bottom: 0px;
    color: #b3b2b3;
    }

    /* below makes Learn More buttons visible on devices*/
    @media only screen and (max-width: 420px){
    #featured-slider .entry-content, #featured-slider .slider-read-more-button {
    display: block;}
    }

    /* color of menu bar on devices*/
    .site-header .menu-toggle {
    background: #565559;}

    Hi,

    The below CSS seems to be missing in the Additional CSS box. Could you insert the code mentioned below and check?

    #header-text-nav-container .inner-wrap {
        max-width: 100%;
    }
    #header-left-section {
        margin: 0;
    }
    #header-logo-image {
        padding: 0;
    }
    #header-logo-image img {
       width: 100%;
    }
    #header-right-section {
        margin-right: 30px;
    }

    Thanks.

    jlevant

    (@jlevant)

    Hi Rajesh

    I did just insert it and it doesn’t seem to move the top graphic to the edges. As of now, I have uploaded all new slides @ 1217 pixels (same as the top graphic) but the slides have clear margins on each end so they look the same width as the logo graphic looks. I think that’s fine and I’m ready to give up the original pursuit.

    I need to get on with building the site!

    If you have code to make the footer area line up with the slides and the top graphic on each side, that would be wonderful – but not as crucial.

    Hi,

    The logo is showing full width while checking your site. Can you clear your browser’s cache and check? Also, for showing the slides full width, the recommended size is 1400 * 500.
    You can take a reference from the link below:
    https://docs.themegrill.com/spacious/#section-14

    Thanks.

    jlevant

    (@jlevant)

    I don’t know what it might look like on a pc, but on my mac, in three different browsers, my iPad and my phone, the logo graphic and the slides are NOT full width – but I like having the margin around them. They are all 1218 pixels which I think is plenty big enough since most people will be accessing the site from their phones anyway. The footer area however IS full width and as I mentioned, I would like it to also be aligned with the slides and top graphic.

    I’m going offline soon and won’t be working on the site until Saturday.

    Hi,

    Could you please explain in detail as to what you want to achieve in the footer with a screenshot if possible. We will try to help as much as we can.

    Thanks.

    Thanks. This has all been resolved and I the topic.

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