Anyone with Sequential theme experience?

  • Unknown's avatar
    scottonbainbridge · Member ·

    Please see scottjames.me for how I’m using the Sequential theme’s child pages to show a series of endorsements (photos + text).

    Can I use CSS to decrease the image size and/or font size for how the child pages display when scrolling down on the main page? I’m a total newbie and could benefit from being pointed in the correct direction, specifically how I reference those elements in the child pages.

    My current CSS just has a few tweaks added to it…any and all advice appreciated!

    a.button {
    background: #ed950f;
    }

    .footer-widget-area a.button {
    background: #ed950f;
    color: #686868;
    }

    .site-title a {
    font-size: 1.875em;
    }

    .site-description {
    font-size: 1.075em;
    }

    .site-title a {
    color: #ed950f;
    }

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi @scottonbainbridge, If we make the images smaller, they aren’t going to align with the title and text below. We can make the entire grid area entries narrower. The first rule below narrows things by 50px (from 314 to 264) and then takes that 50px and adds 25px each to the left and right margins to keep the images centered and spaced correctly across the page. The second rule will allow you to adjust the titles on the entries in the grid area, and the third the summary text. 

    .home .grid-area .hentry {
    margin-left: 61px;
    margin-right: 61px;
    width: 264px;
}
.home .grid-area .entry-title {
    font-size: 1.5em;
}
.home .grid-area .entry-summary {
    font-size: 100%;
}

    See what you think and let me know.

  • Unknown's avatar
    scottonbainbridge · Member ·

    Richard, many thanks! A couple of follow-up questions:

    1. If I shrink the width of the hentry children enough, could I force a fourth column to appear, or would a WP or theme setting override that? I actually spent quite a bit of time yesterday looking through all the themes for a 4- column theme with the other benefits of Sequential but came up empty-handed.

    2. I made the above CSS additions and changed the font to 1em for the title and 80% for the text. It looks great on a laptop but on mobile it introduces a issue I’m not sure how to fix…I’ve now kicked the child images and text to the right a bit so when scrolling it gets wonky. Have you seen that happen before?

    3. Your user name was intriguing enough that I clicked through to your blog. You might enjoy the film short we shot partially on your island; search on Netflix for “Moving Art” to see our series and look at the 1/2 hour show titled Waterfalls. You will recognize one or more of your island’s amazing features! :)

  • Unknown's avatar
    thesacredpath · Member ·

    Remove this from the CSS I gave 

    .home .grid-area .hentry {
    margin-left: 61px;
    margin-right: 61px;
    width: 264px;
}

    and then add this at the bottom below any other CSS. 

    @media screen and (min-width: 1230px) {
	.home .grid-area .hentry {
		width: 150px;
		margin-left: 62px;
		margin-right: 62px;
	}
	.home .grid-area .hentry:nth-of-type(4n+1) {
		clear: left !important;
	}
	.home .grid-area .hentry:nth-of-type(3n+1) {
		clear: none;
	}
}
@media screen and (max-width: 1229px) and (min-width: 1020px) {
	.home .grid-area .hentry {
		margin-left: 72px;
		margin-right: 72px;
		width: 150px;
	}
	.home .grid-area .hentry:nth-of-type(3n+1) {
		clear: left;
	}
}

    Make sure and check things on a tablet and phone if you can. It appears to work fine for me, but check just to make sure.

  • Unknown's avatar
    scottonbainbridge · Member ·

    Excellent! Many, many thanks, sir.

    If I want to experiment with less white space between the four columns, can I do so by playing with the values for margin-left and margin-right?

  • Unknown's avatar
    thesacredpath · Member ·

    Yes you can. If you decrease the left/right margins by 25px each, you can add 50px to the width of the .hentry if you wish.

  • Unknown's avatar
    scottonbainbridge · Member ·

    Many thanks, again!

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

  • The topic ‘Anyone with Sequential theme experience?’ is closed to new replies.