Changing the height of the gallery

Home Forums Automattic Flora and Fauna Changing the height of the gallery

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #163576 Resolve

    Woolton High School

    Hi, was wondering if anyone knows how to change the height of the gallery in this theme. I have an image that is the same width but shorter in height and it leaves too much empty space on the top and bottom of the gallery images.

    Thank you in anticipation of your help.

    The blog I need help with is wooltonhighschool.co.uk
    #163578

    Richard S.
    Happiness Engineer

    Hi there, add the following to your custom CSS, at the bottom, and see what you think. I’ve left a bit of a band of the maroon color at top and bottom, partly to keep space for the slideshow control buttons.


    .page-id-1324 #content .slideshow-window, .jetpack-slideshow {
    padding-bottom: 36.25% !important;
    }
    .page-id-1324 .slideshow-controls {
    bottom: 5px !important;
    }

    I’ve limited the above to your Safeguarding page by using the unique page id CSS class set in the opening body tag on that page. I did this so that in the even you use slideshows on other pages with larger images, it won’t cause issues with those. If you have more locations where this is an issue just let me know.

    I also noticed that your submenus are partly obscuring the top level menu item. The following will adjust that.

    .navigation-main ul ul {
    top: 2.45em;
    }

    #163579

    Woolton High School

    WOW! Thank you so much. That’s amazing. I didn’t expect a reply so quickly. Just added to my CSS and it worked perfectly.

    #163580

    Woolton High School

    Sorry to trouble you again but do you know if there is any way that the top image of school can be moved to sit directly above the school name banner on the home page? Also, would you know how to get the text on all pages slightly darker.

    #163581

    Woolton High School

    Hi, I’m not sure what has happened but now that I have closed the website and later gone back into the page I amended the original CSS for (as above) the gallery has returned back to it’s original size??

    #163582

    Richard S.
    Happiness Engineer

    Hi there, I’ve changed the CSS selector in your customizer for the first rule slightly, and also removed some broken CSS that was right above those two which was keeping the last two rules from being applied. Everything seems to be working fine now in Firefox, Chrome and in Safari.

    On the text color, add the following to your custom CSS which takes the majority of the text to black from the original dark grey.

    body, button, input, select, textarea {
        color: #000;
    }

    Since the logo and school image are all incorporated into the header image, to have the school centered, you would need to edit that image and center that section of the image and then upload and use that image.

    #163583

    Woolton High School

    Hi, thanks very much once more for fixing those issues with the gallery and the CSS code for the text colour. Much appreciated.

    #163584

    Woolton High School

    Hi Richard, sorry to bother you once again but I didn’t seem to explain myself clearly with regards to the top banner. I did not want a space between the school banner image/logo at the top and the text banner underneath with woolton high school. I would like the top banner to sit right on top of the text banner part if possible.

    Thanks

    #163585

    Kathryn P.
    Happiness Engineer

    Adding this to your custom CSS should eliminate the space between the banner at the top and the site title below it:

    .site-header img {
       margin-bottom: 0;
    }
    #163597

    Woolton High School

    Hi, thanks very much for this code. Much appreciated.

    #163598

    Kathryn P.
    Happiness Engineer

    You’re very welcome. I’ll mark this thread as resolved but feel free to start a new one if you need help with anything else.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.